<template>
	<div class="middle-info">
    <img class="image_dz" v-if="detailAll.item_unified_background_image_dz" :src="detailAll.item_unified_background_image_dz">
    <img style="width: 100%" v-if="detailAll.is_fist_full_subtract_some_flag" src="https://img.wifenxiao.com/h5-wfx/images/item/detail/firstOrder.png">
    <div class="free_order" v-if="detailAll.if_free_order_item && detailAll.free_order_num_desc">
      <img src="https://img.wifenxiao.com/h5-wfx/images/freeQuentWhite.png">
      <div>{{ detailAll.free_order_num_desc }}</div>
    </div>
    <!--商品基本信息-->
    <div class="activity" v-if="isItemActivityDetail">
      <!--内购-->
      <goods-activity
        v-if="detailAll.ng_activity==1"
        actType="NeiGou"
        :detailAll="detailAll"
        :priceStr="priceStr"
        :actMsg="actMsg"
        :actEndTime="actEndTime"
        ></goods-activity>

      <!--秒杀-->
      <goods-activity
        v-else-if="detailAll.is_miao==1"
        actType="MiaoS"
        :detailAll="detailAll"
        :actMsg="actMsg"
        :actEndTime="actEndTime"></goods-activity>

      <!--限时折扣-->
      <goods-activity
        v-else-if="detailAll.is_limit_discount==1"
        actType="XianSZ"
        :detailAll="detailAll"
        :actMsg="actMsg"
        :actEndTime="actEndTime"></goods-activity>

      <!--拼团-->
      <goods-activity
        v-else-if="detailAll.isGroup"
        actType="PingT"
        :detailAll="detailAll"
        :actMsg="actMsg"
        :actEndTime="actEndTime"></goods-activity>

      <!--周期购-->
      <goods-activity
        v-else-if="detailAll.is_cycle==1"
        actType="ZhouQG"
        :detailAll="detailAll"
        :actMsg="actMsg"
        :actEndTime="actEndTime"></goods-activity>

      <!--砍价-->
      <goods-activity
        v-else-if="detailAll.is_bargin==1"
        actType="KanJ"
        :detailAll="detailAll"
        :actMsg="actMsg"
        :actEndTime="actEndTime"></goods-activity>

      <!--试用-->
      <goods-activity
        v-else-if="detailAll.is_try == 1"
        actType="ShiY"
        :detailAll="detailAll"
        :actMsg="actMsg"
        :actEndTime="actEndTime"></goods-activity>

      <!--多买优惠-->
      <goods-activity
        v-else-if="detailAll.bmd_info && detailAll.bmd_info.bmd_id > 0"
        actType="BuyMore"
        :detailAll="detailAll"
        :actMsg="actMsg"
        :actEndTime="actEndTime"></goods-activity>

    </div>
    <div class="mid-wrap">
      <div class="course-tab" v-if="is_online_course==1">
        <div class="course-tab-con">
          <div class="item" :class="showCourselist?'':'cur'" @click="clickShowCourselist">专栏介绍</div>
          <div class="item" :class="showCourselist?'cur':''" @click="clickShowCourselist">专栏目录<van-button round class="icon" v-if="provu==1">试看</van-button></div>
        </div>
      </div>
      <div class="middle-info-con"  v-show="!showCourselist">

        <div class="middle-info-item title-price-box" :style="detailAll.is_try==1 ? 'padding-bottom: 0':''">
          <!-- 限时购 -->
          <div class="time-purchase" v-if="detailAll.item_detail && detailAll.item_detail.is_time_purchase==1 && detailAll.purchase_info && detailAll.purchase_info.status">
            <div class="time_to_buy">
              <div class="time_to_buy_wrap">
                <div class="time_to_buy_info">
                  <i></i>
                  <b v-if="detailAll.purchase_info.status==1">限时购结束还剩</b>
                  <b v-if="detailAll.purchase_info.status==2">距离限时购开始</b>
                </div>
                <div v-if="detailAll.purchase_info.start_time || detailAll.purchase_info.end_time" class="time_to_buy_time" v-html="timePurchase"></div>

                <div v-else class="time_to_buy_time">
                  <span class="num">00</span>
                  <span class="pot">天</span>
                  <span class="num">00</span>
                  <span class="pot">时</span>
                  <span class="num">00</span>
                  <span class="pot">分</span>
                  <span class="num">00</span>
                  <span class="pot">秒</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 隐藏itemPrice是为了保证computed里面的计算一定运行 -->
          <div class="hidden-price" v-show="false">{{itemPrice}}</div>
                    <!-- 定制 野火教育 隐藏不显示 -->
          <div class="good-price-collect" v-if="!isItemActivityDetail && !detailAll.wild_fire_education">
            <div class="good-price-main" v-if="detailAll.item_detail">
              <div class="goods-sale" v-if="!isItemActivityDetail">
                <div class="fontZiy" v-if="detailAll.is_self_support == 1">自营</div>
                <div class="price" v-if="detailAll.dhs_rank && detailAll.dhs_original_price_display==1">
                  <span v-html="itemPrice"></span>
                </div>
                <div class="price" v-else>
                  <span v-html="itemPrice"></span>
                </div>

                <div class="dollar-price" v-if="detailAll.item_detail.dollar_price && detailAll.is_paypal==1">
                  &dollar;<span v-html="scaleGoodsPriceNoMarkFn(detailAll.item_detail.dollar_price)"></span>
                </div>
                <div class="commision" v-if="detailAll.pre_commission>0">
                  <span>{{detailAll.earn_alias}}</span><span>{{mSymbol.name}}{{detailAll.pre_commission}}</span>
                </div>
                <!-- 券后价格 -->
                <div class="coupon_price" v-if="detailAll.is_coupon_detail_show == 1 && (detailAll.coupon_listscount && detailAll.coupon_listscount.length>0) && detailAll.item_coupon_value">
                  <span>券后</span>
                  <span v-html="scaleGoodsPriceFn(detailAll.item_coupon_value)"></span>
                  <span>起</span>
                </div>


                <!-- 购买需要的积分和虚拟币 -->
                <div class="point" v-if="detailAll.item_detail.buy_need_points!=0">
                  +<span>{{detailAll.item_detail.buy_need_points}}{{detailAll.cash_point_name || detailAll.point_name}}</span>
                </div>
                <div class="virtual_currency" v-if="detailAll.item_detail.buy_need_virtual_currency!=0">
                  +<span>{{detailAll.item_detail.buy_need_virtual_currency}}{{detailAll.virtual_currency_title}}</span>
                </div>
              </div>
              <div class="other-price" v-if="(!detailAll.discount || detailAll.discount==10 || detailAll.item_detail.rank_price || !detailAll.is_limit_discount) && !isItemActivityDetail">
                <div class="original_price" v-if="detailAll.is_display_original_price==1">
                  {{detailAll.original_price_name}}:<s>{{mSymbol.name}}{{detailAll.item_detail.original_price}}</s>
                </div>
                <div class="present_price" v-if="detailAll.item_detail.before_price && detailAll.is_display_current_price==1">
                  {{detailAll.present_price_name}}:
                  <span>{{mSymbol.name}}{{detailAll.item_detail.before_price}}</span>
                </div>
                <!-- 订货商价格 -->
                <div class="dhs-level-price">
                  <!-- 上级 -->
                  <div>
                    <p class="dhs-price" v-if="detailAll.dhsRank">
                      {{detailAll.dhsRank}}：<span v-if="detailAll.priceDhsRank!=-1">{{mSymbol.name}}{{detailAll.priceDhsRank}}</span><span v-else>{{mSymbol.name}}{{detailAll.priceMin}}-{{detailAll.priceMax}}</span>
                    </p>
                  </div>
                  <!-- 下级 -->
                  <div>
                    <p class="dhs-price" v-if="detailAll.dhsDownName && detailAll.dhsDownPrice">
                      {{detailAll.dhsDownName}}：￥{{detailAll.dhsDownPrice}}
                    </p>
                  </div>
                  <div v-if="detailAll.TwoDhDownName && detailAll.TwoDhsDownPrice">
                    <p class="dhs-price">
                      {{detailAll.TwoDhDownName}}：￥{{detailAll.TwoDhsDownPrice}}
                    </p>
                  </div>
                </div>
              </div>
              <div class="crossPrice mgb20" v-if="detailAll.is_open_kuajing==1 && detailAll.item_detail.total_tax_fee>0"><span>含税价：¥{{detailAll.item_detail.total_tax_fee}}起</span></div>
            </div>
            <!-- 定制  西安海师文化产业有限公司 start -->
            <template v-if="detailAll.item_detail_style_dz">
              <div class="collect" :class="detailAll.display_orderer_statistics? 'collectTop':''" v-if="!isItemActivityDetail" @click="clickCollect">
                <div class="icon icon-collect" :class="isCollected?'collected':''"></div>
                <div>收藏</div>
              </div>
            </template>

            <!-- 定制  西安海师文化产业有限公司 end -->
            <!-- 定制 野火教育 隐藏分享按钮 -->
            <template v-else-if="!detailAll.wild_fire_education">
              <div class="collect" :class="detailAll.display_orderer_statistics? 'collectTop':''" v-if="!isItemActivityDetail" @click="showGoodsCode">
                <div class="icon icon-share"></div>
                <div>分享</div>
              </div>
            </template>

            <div class="collect collect1" v-if="!isItemActivityDetail && detailAll.display_orderer_statistics" @click="dzShareImg">
              <div class="iconhb">
                <img src="https://img.wifenxiao.com/h5-wfx/images/DZ/yatuan/hb.png" style="width: 100%;height: 100%">
              </div>
              <div>海报</div>
            </div>
          </div>

          <!-- 高等级会员价 定制 野火教育 隐藏不显示 -->
          <div class="goods-vip" v-if="detailAll.top_rank_price && detailAll.top_rank_price.price && !detailAll.wild_fire_education">
            <a href="javascript:;" class="clearfix" @click="JumpName('rechargeList')">
              <span class="fl vip-left">{{detailAll.top_rank_price.rank_name}} <b>&yen;{{detailAll.top_rank_price.price}}</b></span>
              <span class="fr vip-right">立即开通<i class="icon-right"></i></span>
            </a>
          </div>

          <div class="import_tax" v-if="detailAll.is_open_kuajing==1 && detailAll.item_detail.tax_fee>0 && detailAll.item_config.kuajing_type && detailAll.item_config.kuajing_type!=0">另需进口税：预计&yen;{{detailAll.item_detail.tax_fee}}起<i class="import_tax_tip" @click="handleOpenTaxDialog"></i></div>

          <div class="kj_box clearfix" v-if="detailAll.is_open_kuajing==1 && detailAll.item_config.kuajing_type && detailAll.item_config.kuajing_type!=0">
            <div class="area_info fl" v-if="detailAll.item_config.origin_area && detailAll.origin_area_info">
                <img :src="detailAll.origin_area_info.logo_url" mode="scaleToFill" />
                <span class="area_name">{{detailAll.origin_area_info.name}}</span>
            </div>
            <div class="kj_bssp fl" v-if="detailAll.item_config.kuajing_type==1"><i></i>保税商品</div>
            <div class="kj_hwzy fl" v-else-if="detailAll.item_config.kuajing_type==2"><i></i>海外直邮</div>

            <div class="kj_delivery fl" v-if="detailAll.origin_area_info.kuajing_delivery_name"><i></i>{{detailAll.origin_area_info.kuajing_delivery_name}}发货</div>
          </div>

          <!-- 上海合亚电子商务有限公司 start -->
            <!--
              dz_hydz_array{
                is_show： 1 显示 ；0 不显示
                type： 1 有 sku ；0 没有 sku
            -->
          <div v-if="is_hydz_dz && detailAll.dz_hydz_array && detailAll.dz_hydz_array.is_show == 1" class="hy-whole">
            <template v-if="detailAll.dz_hydz_array.type == 1">
              <div class="level" v-for="list in detailAll.dz_hydz_array.list" :key="list.rank_id">
                <div class="level-title">{{list.rank_name}}：{{list.price[0]}}-{{list.price[1]}}</div>
                <div class="level-btn">
                  <div @click="openClick(list.url)">
                    <span>立即开通</span>
                  </div>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="level" v-for="list in detailAll.dz_hydz_array.list" :key="list.rank_id">
                <div class="level-title">{{list.rank_name}}：{{list.price}}</div>
                <div class="level-btn">
                  <div @click="openClick(list.url)">
                    <span>立即开通</span>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <!-- 上海合亚电子商务有限公司 end -->

          <div class="goods-title" :style="detailAll.top_rank_price && detailAll.top_rank_price.price ? '':'padding-top: 5px'" v-if="detailAll.item_detail">
            <div class="title-box" :class="isItemActivityDetail ? '' : 'wid100'">
              <!--     常俊海第一期定制   start  -->
              <!--     常俊海第一期定制  end  -->
              <span class="goods-title-tip NeiGou" v-if="detailAll.ng_activity==1"></span>
              <span class="goods-title-tip MiaoS" v-else-if="detailAll.is_miao==1">{{detailAll.actives_title}}</span>
              <span class="goods-title-tip XianJiZ" v-else-if="detailAll.discount && detailAll.discount!=0 && detailAll.discount!=10 && !detailAll.item_detail.rank_price && detailAll.is_limit_discount">
                <span v-if="detailAll.discount_sta==1">限时 ¥{{detailAll.discount}}</span>
                <span v-else>限时{{detailAll.discount}}折</span>
              </span>
              <span class="goods-title-tip KanJ" v-else-if="detailAll.is_bargin==1">砍价</span>
              <span class="goods-title-tip ZheK" v-else-if="detailAll.discount && detailAll.discount!=0 && detailAll.discount!=10 && !detailAll.item_detail.rank_price">{{detailAll.item_detail.rank_name}}&nbsp;{{detailAll.discount}}折</span>
              <span class="goods-title-tip FuGYH" v-else-if="detailAll.item_detail.is_repurchase==1">复购优惠</span>
              <span class="goods-title-tip" v-else-if="detailAll.presale_info==1 && detailAll.presale_info.deposit_money">预售</span>
              <span class="goods-title-tip" v-else-if="detailAll.is_buy_gift==1">买赠</span>
              <span class="goods-title-tip Try" v-else-if="detailAll.is_try==1">试用</span>
              <span class="goods-title-tip ZhouQG" v-else-if="detailAll.is_cycle==1">周期购</span>
              <div class="goods-title-tip fontZiy" v-if="detailAll.item_detail.is_self_support == 1">自营</div>
              <span class="goods-title-txt">{{detailAll.item_detail.title}}</span>
              <div class="useTime" v-if="detailAll.validity_date_start || detailAll.validity_date_end">
                <span class="red">使用时间：</span>
                <span>{{detailAll.validity_date_start}} 至 {{detailAll.validity_date_end}}</span>
              </div>
            </div>
            <!-- 定制  西安海师文化产业有限公司 start -->
            <template v-if="detailAll.item_detail_style_dz">
              <div class="collect" @click="clickCollect" v-if="isItemActivityDetail">
                <div class="icon icon-collect" :class="isCollected?'collected':''"></div>
                <div>收藏</div>
              </div>
            </template>
            <!-- 定制  西安海师文化产业有限公司 end -->
            <template v-else-if="!detailAll.wild_fire_education">
              <div class="collect" @click="showGoodsCode" v-if="isItemActivityDetail">
                <div class="icon icon-share"></div>
                <div>分享</div>
              </div>
            </template>

          </div>
          <div class="goods-title-txt2" v-if="detailAll.item_detail && detailAll.item_detail.fenxiao_slogan">{{detailAll.item_detail.fenxiao_slogan}}</div>

          <!-- 周期购 start-->
          <div class="delivery_cycle" v-if="detailAll.activity==7">
            <!-- 周期购活动补充文案 -->
            <div class="cycle_record">{{detailAll.item_cycle.supplement_copy}}</div>
          </div>

          <!-- 定制 野火教育 隐藏不显示 -->
          <div class="ladder_price_wrap" v-if="detailAll.is_try!=1 && !detailAll.isGroup && !detailAll.wild_fire_education">
            <!-- 订货商阶梯价格 -->
            <div class="ladder_price_detail" v-if="detailAll.ladder_price && detailAll.ladder_price.length>0 && detailAll.dhs_original_price_display!=1">
              <ul class="area_price">
                <li v-for="(item,index) in detailAll.ladder_price" :key="index">
                  <p class="t1">{{mSymbol.name}}<span>{{item.ladder_region_price}}</span></p>
                  <p class="t2">{{item.ladder_min}}-{{item.ladder_max}}{{detailAll.item_detail.unit}}</p>
                </li>
              </ul>
            </div>

            <!-- 预售商品 -->
            <div class="presell" v-if="detailAll.presale_info && detailAll.presale_info.deposit_money>0">
              <div class="earnest_box">
                <p class="left">
                  <span class="front_money">定金 </span>
                  <span class="symbol">{{mSymbol.name}}</span>
                  <span class="number">{{detailAll.presale_info.deposit_money}}</span>
                </p>
                <p class="right">定金 可抵用
                  <span>{{mSymbol.name}}{{detailAll.presale_info.lieu_money}}</span>
                </p>
              </div>
              <div class="presale-paytime">支付尾款时间：{{detailAll.presale_info.start_restpay_time}} ~ {{detailAll.presale_info.end_restpay_time}}</div>
            </div>
          </div>

          <!-- 定制 野火教育 隐藏不显示 -->
          <div class="goods-other clearfix" v-if="detailAll.is_try!=1 && detailAll.item_detail && !detailAll.wild_fire_education">
            <div class="fl" v-if="detailAll.item_detail.hide_stock==1">
              <div class="goods-other-item" v-if="detailAll.is_miao==1">活动数量:
                <span>{{detailAll.miao.total_num}}{{detailAll.item_detail.unit}}</span>
              </div>
              <div class="goods-other-item" v-else>库存:
                <span>{{detailAll.item_detail.num}}{{detailAll.item_detail.unit}}</span>
              </div>
              <div class="goods-other-item" v-if="detailAll.is_miao==1">剩余:
                <span>{{detailAll.item_detail.left_num}}{{detailAll.item_detail.unit}}</span>
              </div>
              <div class="goods-other-item" v-else-if="detailAll.is_limit_discount==1 || detailAll.is_bargin==1">活动商品:
                <span>{{detailAll.item_detail.left_num}}{{detailAll.item_detail.unit}}</span>
              </div>
            </div>
            <!-- 销量 -->
            <div class="goods-other-item" v-if="detailAll.is_show_sale==1">{{detailAll.sales_alias}}:
              <span>{{detailAll.item_detail.basic_sales}}{{detailAll.item_detail.unit}}</span>
            </div>
            <!-- 定制 科厚饰品 不显示重量 stard -->
            <template v-if="!khspStatus">
              <template v-if="detailAll.item_config.weight_alias !== '' || detailAll.item_config.weight_alias_unit !== ''">
                <div class="goods-other-item" v-if="detailAll.item_detail.weight>0">{{ detailAll.item_config.weight_alias }}:
                  <span>{{detailAll.item_detail.weight}}{{ detailAll.item_config.weight_alias_unit }}</span>
                </div>
              </template>
              <template v-else>
              <div class="goods-other-item" v-if="detailAll.item_detail.weight>0">重量:
                <span v-if="detailAll.item_detail.weight<1">{{((detailAll.item_detail.weight * 10000) / 10).toFixed(2)}}克</span>
                <span v-else>{{detailAll.item_detail.weight}}千克</span>
              </div>
              </template>
            </template>
            <!-- 定制 科厚饰品 不显示重量 end -->

            <div class="goods-other-item" v-if="detailAll.item_detail.volume>0">体积:
              <span v-if="detailAll.item_detail.volume<1">{{(detailAll.item_detail.volume * 100 * 100) / 10}}dm3</span>
              <span v-else>{{detailAll.item_detail.volume}}m3</span>
            </div>
            <!-- 有税费且不是跨境商品 -->
            <div class="goods-other-item" v-if="detailAll.item_detail.tax_fee>0 && !(detailAll.is_open_kuajing==1 && detailAll.item_config.kuajing_type && detailAll.item_config.kuajing_type!=0)">{{detailAll.taxes_alias}}:
              <span>&yen;{{detailAll.item_detail.tax_fee}}</span>
            </div>

            <!-- 赠送积分 -->
            <div v-if="!detailAll.is_cjh">
              <div class="goods-other-item" v-if="detailAll.item_detail.consum_point>0 && (!detailAll.is_point_trader || detailAll.is_point_trader==0 || (detailAll.is_point_trader!=0 && detailAll.is_agent==1))">{{detailAll.point_name}}:
                <span>{{detailAll.item_detail.consum_point}}</span><i class="donate">赠送</i>
              </div>
            </div>

            <!-- 赠送虚拟币 -->
            <div class="goods-other-item" v-if="detailAll.item_detail.consum_virtual_currency>0 && detailAll.is_virtual_currency">{{detailAll.virtual_currency_title}}:
              <span>{{Math.floor(detailAll.item_detail.consum_virtual_currency)}}</span><i class="donate">赠送</i>
            </div>

            <!-- 运费 -->
            <div class="goods-other-item" v-if="!(detailAll.item_detail.is_free_logistics==1 || detailAll.item_detail.is_self_take==1 || detailAll.item_detail.is_expect==1 || detailAll.is_dz_op==1)">运费:
              <span v-if="detailAll.item_detail.post_fee>0">{{mSymbol.name}}{{detailAll.item_detail.post_fee}}</span>
              <span v-else>
                <i class="" v-if="detailAll.item_detail.freight_payer==4">(到付)</i>
                <i class="" v-else>(包邮)</i>
              </span>
            </div>

            <div class="goods-other-item" v-if="detailAll.is_dz_op==1 && detailAll.dz_full_mail_money_msg">运费:
              <span>{{detailAll.dz_full_mail_money_msg}}</span>
            </div>

          </div>
        </div>
        <!--  常俊海 第一期定制 --折上折 start  -->
        <div class="fold_main" v-if="detailAll.hasDiscountPlus == 1">
          <div class="flod_bg">
            <p>折上{{detailAll.DiscountPlus}}折  优惠不停</p>
          </div>
        </div>

        <!--N元任选-->
        <div class="select-any" v-if="detailAll.is_packageprice==1 && !detailAll.isGroup">
          <div class="select-left">
            <div class="select-any-tips">N元任选</div>
            <div class="select-any-txt">{{detailAll.item_packageprice.active_rule}}</div>
          </div>
          <div class="select-any-btn select-right" @click="JumpName('item-opt',{id:detailAll.item_packageprice.item_packageprice_active_id})">
            <span class="num">去凑单</span>
            <span class="icon"><i class="icon-right"></i></span>
          </div>
        </div>

          <!--预售结束\发货信息-->
        <div class="middle-info-item presale-box" v-if="detailAll.presale_info && !detailAll.isGroup">
          <div class="presale-time">
            <div class="left">预售</div>
            <div class="right">
              <p>结束时间: {{detailAll.presale_info.end_time}}</p>
              <p>预计发货:
                <span v-if="detailAll.presale_info.start_delivery_time && detailAll.presale_info.end_delivery_time">{{detailAll.presale_info.start_delivery_time}}-{{detailAll.presale_info.end_delivery_time}}</span>
                <span v-else-if="detailAll.presale_info.start_delivery_time && !detailAll.presale_info.end_delivery_time">{{detailAll.presale_info.start_delivery_time}}开始发货</span>
                <span v-else-if="!detailAll.presale_info.start_delivery_time && detailAll.presale_info.end_delivery_time">最晚{{detailAll.presale_info.end_delivery_time}}发货</span>
              </p>
            </div>
          </div>
        </div>

        <!-- 拼团团长等价格 -->
        <div class="group-price-box" v-if="detailAll.isGroup">
          <section class="middle-info-item group_goods_info" v-if="detailAll.info.aggregation_type==1 && detailAll.info.tuan_no_pay==2">
            <div class="info_bot">
              <span>非拼团价:
                <i>&yen;{{detailAll.info.itemInfo.price}}</i> <b>/{{detailAll.info.itemInfo.unit}}</b>
              </span>
              <span v-if="detailAll.showButton">团长价:
                <i>&yen;{{detailAll.info.fixed_price}}</i> <b>/{{detailAll.info.itemInfo.unit}}</b>
              </span>
            </div>
          </section>

          <section class="middle-info-item group_goods_info" v-if="detailAll.info.aggregation_type==1 && detailAll.info.small_group_type==1">
            <div class="info_bot">
              <span>新人团购价:
                <i>&yen;{{detailAll.info.novice_price}}</i> <b>/{{detailAll.info.itemInfo.unit}}</b>
              </span>
            </div>
          </section>
        </div>

        <!-- 服务承诺 -->
        <section class="service_box" v-if="detailAll.service_promise && detailAll.service_promise.length!=0" @click="handleOpenServiceDialog">
          <div class="service_content">
            <div class="shop-server">
              <span v-for="(service_promise_vo,index) in detailAll.service_promise" :key="index" v-if="index<3">
                <i class="img-promise">
                  <img :src="service_promise_vo.img" v-if="service_promise_vo.img" />
                  <img src="https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_promise.png" v-else/>
                </i>
                {{service_promise_vo.name}}
              </span>
              <i class="icon-right"></i>
            </div>
          </div>
        </section>

        <!-- 定制 野火教育不显示 sku等信息  -->
        <div class="middle-info-item middle" v-if="!detailAll.wild_fire_education">
          <!-- 促销 -->
          <div class="common-wrap promotion" v-if="detailAll.is_try!=1 && ((detailAll.item_detail && detailAll.item_detail.full_num_text) || detailAll.subtract_msg) && !detailAll.isGroup">
            <div class="common-wrap-label">促销</div>
            <div class="common-wrap-con">
              <div class="common-con-info" v-if="detailAll.item_detail.full_num_text">
                <span class="name">满额包邮</span>
                <span class="detail">{{detailAll.item_detail.full_num_text}}</span>
              </div>
              <div class="common-con-info" v-if="detailAll.subtract_msg">
                <span class="name">店铺满减</span>
                <span class="detail">{{detailAll.subtract_msg}}</span>
              </div>
            </div>
          </div>
          <!-- 推三返一标签 -->
          <div class="common-wrap" v-if="detailAll.fission_activity && detailAll.fission_activity.name">
            <div class="common-wrap-label">活动</div>
            <div class="common-wrap-con">
              <div class="back-one">{{detailAll.fission_activity.name}}</div>
              <!-- <div class="common-wrap-icon">
                <span class="icon"><svg-icon icon-class="icon_right" /></span>
              </div> -->
            </div>
          </div>
          <!--优惠券-->
          <div class="common-wrap" v-if="detailAll.coupon_listscount && detailAll.coupon_listscount.length>0 && detailAll.is_try!=1" @click="handleOpenCouponDialog">
            <div class="common-wrap-label">领券</div>
            <div class="common-wrap-con">
              <div class="coupon">
                <div class="coupon-item" v-for="(item,index) in detailAll.coupon_listscount" :key="index"  v-if="index<1">
                  <span class="coupon_info">
                    <span class="coupon_price" v-if="item.promotion_type==1">{{item.value}}折</span>
                    <span class="coupon_price" v-else>&yen;{{item.value}}</span>
                    <span class="coupon_tip" v-if="item.coupon_type!=3">
                      <span v-if="item.at_least>0">满{{item.at_least}}元使用</span>
                      <span v-else>不限订单金额</span>
                    </span>
                  </span>
                </div>
              </div>
              <div class="common-wrap-icon">
                <span class="icon"><i class="icon-right"></i></span>
              </div>
            </div>
          </div>

          <!--商品规格-->
          <div class="common-wrap" v-if="!(detailAll.is_miao==1 || detailAll.is_bargin==1 || detailAll.is_cycle==1 || detailAll.isGroup==1 || detailAll.is_try==1) && off_shelf_status!=1 && showSku" @click="handleOpenSkuDialog(detailAll.item_detail)">
            <div class="common-wrap-label">{{skuLabel}}</div>
            <div class="common-wrap-con">
              <span>{{skuDetail}}</span>
              <div class="common-wrap-icon" style="justify-content: flex-end;">
                <span class="icon"><i class="icon-right fr"></i></span>
              </div>
            </div>
          </div>

          <!--点赞-->
          <div class="common-wrap" v-if="detailAll.is_praise_share==1">
            <div class="common-wrap-label">点赞</div>
            <div class="common-wrap-con">
              <span></span>
              <div class="common-wrap-icon" @click="clickPraise(detailAll.item_detail.item_id)">
                <span class="icon zan" :class="detailAll.praise?'icon_praise':'icon_praised'"></span>
                <span class="num">{{detailAll.praise_num}}</span><span class="txt">次</span>
              </div>
            </div>
          </div>
        </div>

        <!--定制 商品素材-->
        <div class="mmxx_btn" v-if="detailAll.mmxx_dz_item_url" @click="linkTo(detailAll.mmxx_dz_item_url)">
          <span>商品</span>
          <span>素材</span>
        </div>

        <!-- 定制  河北华仁医疗设备 start -->
        <div class="dz_item nearby_stores">
            <section class="mdetail_goodsdet_detail evaluate_logo block_logo">
                <span class="liner_detail">
                </span>
                <span class="detail_content">
                    <i>附近门店</i>
                </span>
                <span class="liner_detail">
                </span>
            </section>
            <div class="list-cont">

            </div>
            <div class="show_more">
                查看更多门店
            </div>
        </div>
        <!-- 定制  河北华仁医疗设备 end -->

        <!--老的销售记录-->
        <div class="middle-info-item sale_record">
          <div class="common-wrap" v-if="detailAll.is_sale_record==1" @click="JumpName('itemSaleRecord',{id:detailAll.item_detail.item_id})" href="http://m.newfx.wxfenxiao.com/Item/sale_record/id/2062748/I21/qjWs/sid/6.html?pid=9365">
            <div class="common-wrap-label">近期售出商品（{{detailAll.sales_record_total}}）</div>
            <div class="common-wrap-con">
              <div></div>
              <div class="common-wrap-icon">
                <span class="icon"><i class="icon-right"></i></span>
              </div>
            </div>
          </div>
        </div>

        <!-- 新购买记录 -->
        <div class="middle-info-item sale_record_new" v-if="detailAll.is_sale_record_new==1 && detailAll.buyer_info.length > 0">
          <div class="title">最近购买记录</div>
          <div class="sale_record">
            <ul class="sale_record_ul list" :style="saleRecordStyle" :class="detailAll.buyer_info.length>5?'last-has-border':''">
              <li class="sale_record_li" v-for="(item,index) in detailAll.buyer_info" :key="index">
                <div class="sale_record_item">
                  <div class="user_img">
                    <img :src="item.avatar" alt="">
                  </div>
                  <div class="center_info">
                    <div class="nickname">{{item.nickname}}</div>
                    <div class="sku_info">{{item.sku_name}}</div>
                  </div>
                  <div class="num">{{item.num}}{{item.unit}}</div>
                  <div class="buy_time">{{item.pay_time}}</div>
                </div>
              </li>
            </ul>
            <div class="show_more" v-if="detailAll.buyer_info.length>5 && saleRecordHide" @click="saleRecordFn(1)"><span>点击查看更多</span><i class="icon-right"></i></div>
            <div class="hide_more" v-else-if="detailAll.buyer_info.length>5 && !saleRecordHide" @click="saleRecordFn(2)"><span>点击收起</span><i class="icon-right"></i></div>
          </div>
        </div>

        <!-- 最近访客 -->
        <div class="middle-info-item recent_visitor_box" v-if="detailAll.is_sale_record_new==1 && detailAll.visitors_record">
          <div class="title">最近访客</div>
          <div class="recent_visitor">
            <div class="box recent_visitor_swiper">
              <div class="user_img" v-for="(item,index) in detailAll.visitors_record" :key="index">
                <img :src="item.avatar" :alt="item.nickname">
              </div>
            </div>
          </div>
        </div>

        <div class="group-info" v-if="detailAll.isGroup && detailAll.is_success != 1">
          <div v-if="detailAll.groupBuy_num>1 && detailAll.groupBuy_left && detailAll.showButton==1">
            <div class="middle-info-item">
              <section class="group_member_title">{{detailAll.groupBuy_status}}，<span v-html="timePurchase"></span><span>后结束</span></section>

              <section class="group_member">
                <ul class="clearfix">
                  <li class="group_member_avatar"  v-if="detailAll.tuan_order && detailAll.info.aggregation_type==1"><img :src="detailAll.tuan_order.avatar"><b></b></li>
                  <li class="group_member_avatar"  v-if="detailAll.groupShoppingOrder.length>0" v-for="(item, index) in detailAll.groupShoppingOrder" :key="index">
                    <img :src="item.avatar" alt="">
                  </li>
                </ul>
              </section>
              <section>
                <template>
                  <wx-button open-type="share" id="fxBtn-share" class="btn invite-btn">{{detailAll.info.small_group_type==1 ? '邀请新人参团':'邀请好友参团'}}</wx-button>
                </template>
              </section>
            </div>
          </div>

          <div v-else>
            <div class="middle-info-item" v-if="detailAll.info.rule || detailAll.show_invite==1">
              <section class="group_goods_rule" v-if="detailAll.info.rule">活动规则
                <div v-html="detailAll.info.rule.replace(/\n|\r\n/g, '<br>').replace(/ /g, ' &nbsp')"></div>
              </section>
              <section v-if="detailAll.show_invite==1">
                <template v-if="detailAll.info.small_group_type==1">
                  <wx-button open-type="share" id="fxBtn-share" class="btn invite-btn">邀请新人参团</wx-button>
                </template>
                <template v-else>
                  <wx-button open-type="share" id="fxBtn-share" class="btn invite-btn" >邀请好友参团</wx-button>
                </template>
              </section>
            </div>

            <!-- 非阶梯团 -->
            <!-- 大团 -->
            <!--  定制十人团  不展示 参团信息  -->
            <div v-if=" !detailAll.is_ten_group">
              <section class="big_group" v-if="detailAll.info.aggregation_type!=2">
                <section class="show_pro middle-info-item" v-if="detailAll.info.aggregation_type=='0'">
                  <section class="show_pro_info">
                    <span class="title">参团信息</span>
                    <van-button round class="btn" @click="handleOpenSkuGroup(detailAll.item_detail)">立即参团</van-button>
                  </section>

                  <section class="show_pro_con">
                    <div class="group_pic">
                      <div class="pic" v-for="(img,index) in detailAll.user_img" :key="index">
                        <img :src="img.headimgurl" alt="">
                      </div>
                      <div class="pic default-pic" v-if="detailAll.img_length<2 || detailAll.img_length==0">
                        <img src="https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg" alt="">
                      </div>
                    </div>
                    <div class="group_count">
                      <span class="count"><i>{{detailAll.count}}</i>人参团</span>
                      <span class="over_pro"><i>{{detailAll.info.startTime}}</i> 至 <i>{{detailAll.info.endIime}}</i></span>
                    </div>
                  </section>
                </section>
              </section>

              <!-- 阶梯团 -->
              <section class="group_StepType middle-info-item" v-else>
                <section class="step_price">
                  <div class="title">拼团价</div>
                  <div class="step_price_info">
                    <div class="step_price_item" v-for="(ladder_price_vo,index) in detailAll.ladder_price" :key="index" :class="[ladder_price_vo.now==1?'cur':'','col'+detailAll.ladder_price.length]">
                      <div>{{ladder_price_vo.num}}人以上</div>
                      <div class="price"><span v-html="scaleGoodsPriceFn(ladder_price_vo.price)"></span><span class="mark">（当前价）</span></div>
                    </div>
                  </div>
                </section>
                <section class="show_pro">
                  <section class="show_pro_info">
                    <span class="title">人越多越优惠</span>
                    <van-button round class="btn" @click="handleOpenSkuGroup(detailAll.item_detail)">立即参团</van-button>
                  </section>
                  <section class="show_pro_con">
                    <div class="group_pic">
                      <div class="pic" v-for="img in detailAll.user_img" :key="img.headimgurl">
                        <img :src="img.headimgurl" alt="">
                      </div>
                      <div class="pic" v-if="detailAll.img_length<2 || detailAll.img_length==0">
                        <img src="" alt="">
                      </div>
                    </div>
                    <div class="group_count">
                      <span class="count"><i>{{detailAll.count}}</i>人参团</span>
                      <span class="over_pro"><i>{{detailAll.info.startTime}}</i> 至 <i>{{detailAll.info.endIime}}</i></span>
                    </div>
                  </section>
                </section>
              </section>
            </div>
            <section class="middle-info-item" v-if="tuanId && detailAll.tuan_order && detailAll.is_success != 1">
              <div class="group_member_title" v-if="detailAll.info.aggregation_type == 1">
                <span>仅剩</span><span style="color: #F21228;">{{detailAll.groupBuy_left}}</span><span>{{detailAll.info.type == 2 ? '件':'个名额'}}</span>，<span v-html="timePurchase"></span><span>后结束</span>
              </div>
              <section class="group_member no-margin">
                <ul class="clearfix">
                  <li class="group_member_avatar" v-if="detailAll.tuan_order && detailAll.info.aggregation_type==1"><img :src="detailAll.tuan_order.avatar"><b></b></li>
                  <li class="group_member_avatar" v-if="detailAll.groupShoppingOrder.length>0" v-for="(item, index) in detailAll.groupShoppingOrder" :key="index">
                    <img :src="item.avatar" alt="">
                  </li>
                  <li v-if="detailAll.is_own_join_group == 1 && detailAll.info.aggregation_type == 1" class="fr group_member_btn" @click="clickShare">邀请好友参团</li>
                  <li v-if="detailAll.is_own_join_group == 0 && detailAll.info.aggregation_type == 1" class="fr group_member_btn" @click="handleOpenSkuGroup(detailAll.item_detail)">去参团</li>
                </ul>
              </section>
            </section>
          </div>

          <!-- 多商品拼团 -->
          <section class="groups_combination middle-info-item" v-if="detailAll.item_group && detailAll.item_group.length>0">
            <div class="groups_combination_title">
              <div class="title">{{detailAll.item_group_title}}</div>
              <div class="groups_all"><a @click="linkTo(detailAll.item_group_link)">全部商品({{detailAll.item_group_counts}})<span class="icon"><i class="icon-right"></i></span></a></div>
            </div>
            <ul class="groups_goods_list">
              <li class="goods_item" v-for="(item_group_vo,index) in detailAll.item_group" :key="index">
                <a @click="linkTo(item_group_vo.link)">
                  <div class="goods_img">
                    <img :src="item_group_vo.pic+'480x480'" :alt="item_group_vo.title" v-if="item_group_vo.is_compress==1">
                    <img :src="item_group_vo.pic" :alt="item_group_vo.title" v-else>
                  </div>
                  <div class="goods_title">{{item_group_vo.title}}</div>
                  <van-button plain hairline class="groups_icon">一起拼</van-button>
                  <div class="goods_price"><i>¥</i>{{item_group_vo.price}}</div>
                </a>
              </li>
            </ul>
          </section>

          <!-- 拼团玩法 -->
          <section class="groups_operate middle-info-item">
            <div class="title">拼团玩法</div>
            <ul>
              <li class="current"><i>1</i><span>选择商品</span></li>
              <li :class="detailAll.is_unfinished || (tuanId && detailAll.tuan_order)?'current':''"><i>2</i><span>支付参与</span></li>
              <li :class="detailAll.is_unfinished || (tuanId && detailAll.tuan_order)?'current':''"><i>3</i><span>参团支付</span></li>
              <li><i>4</i><span>拼团成功</span></li>
            </ul>
          </section>

          <!-- 参与其他团 -->
          <group-more :detailAll="detailAll" v-if="detailAll.other_group &&detailAll.other_group.length>0"></group-more>

        </div>

        <!-- 商品素材 -->
        <goods-material v-if="detailAll.has_material ==1" :itemId="detailAll.item_detail.item_id"></goods-material>

        <!-- 商品评价 -->
        <div id="detailComment" class="detailComment middle-info-item" v-if="detailAll.is_comment==1">
          <div class="criticism">
            商品评价（{{detailAll.comment_count}}）
            <span class="all_evaluate_right" v-if="detailAll.comment_count>0" @click="JumpName('itemComment',{id:detailAll.item_detail.item_id})">查看全部
              <i class="icon-right"></i>
            </span>
          </div>
          <div class="detail-comment-wrap" v-if="detailAll.comment_count!=0">
            <div class="detail-comment" :class="detailAll.item_comment.length==1?'width100':''" v-for="(item,index) in detailAll.item_comment" :key="index" v-if="index<=1">
              <div class="comment_top clearfix">
                <span class="comment_head_img fl">
                  <img :src="item.head_portrait" alt="">
                </span>
                <span class="comment_score fl">
                  <b>{{item.mobile}}</b><br/>
                  <i><img :src="item.describe_star" alt="" mode="scaleToFill"></i>
                </span>
              </div>
              <p class="comment_content">{{item.detail}}</p>
              <div  class="comment_bottom">
                <span>{{item.sku_name}}</span>
              </div>
              <div class="add_comlist" v-if="item.comment && item.add_status == 0">
                <p class="add_label">用户{{item.comment.add_comlist.cha_days}}天后追加</p>
                <p class="add_comlist_style">{{item.comment.add_comlist.detail}}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 问大家 -->
        <div id="detailAsk" v-if="detailAll.is_item_ask_question == 1" class="middle-info-item detailAsk">
          <div class="hasAsk" v-if="itemQuestions && itemQuestions.length > 0">
            <div class="criticism">
              问大家
              <span class="all_evaluate_right" v-if="detailAll.comment_count>0" @click="JumpName('question-list',{id:detailAll.item_detail.item_id})">
                <i class="icon-right"></i>
              </span>
            </div>
            <div class="detail-ask">
              <div
                v-if="index <= 1"
                class="detail-ask-item"
                v-for="(item, index) in itemQuestions">
                <span class="icon_ask"></span>
                <span class="ask-text">{{ item.comment }}</span>
                <span class="answer-text fr">{{ item.answers_num }}个回答</span>
              </div>
              <div class="ask-btn">
                <van-button @click="JumpName('question-list',{id:detailAll.item_detail.item_id})" class="btn" plain>查看全部{{  questionNum }}条问题</van-button>
              </div>
            </div>
          </div>
          <div class="noAsk" v-else>
            <div class="criticism">暂无问答</div>
            <div class="detail-ask">
              <div class="detail-ask-question">
                <span class="icon_question"></span>
                <span class="ask-text">商品好不好，问问买过的人吧</span>
              </div>
              <div class="ask-btn">
                <van-button @click="JumpName('question-list',{id:detailAll.item_detail.item_id})" class="btn" plain>问问买家</van-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 定制  欧普  3D链接 start -->
        <dz-op3DLink v-if="detailAll.opzm_dz==1"></dz-op3DLink>
        <!-- 定制  欧普  3D链接 end -->

        <!-- 店铺信息 定制 野火教育不显示店铺信息 -->
        <div class="middle-info-item shop-info" v-if="((detailAll.supplier_info && detailAll.supplier_info.id) || detailAll.is_store_log==1) && !detailAll.wild_fire_education">
          <div class="shop-con supplier-shop-con" v-if="detailAll.supplier_info && detailAll.supplier_info.id">
            <div class="shop-top">
              <div class="logo">
                <img :src="detailAll.store_logo" />
              </div>
              <div class="shop-name" v-if="detailAll.supplier_info.shop_title">{{detailAll.supplier_info.shop_title}}
                <van-button plain round class="btn brand" v-if="detailAll.supplier_info.label_name">{{detailAll.supplier_info.label_name}}</van-button>
              </div>
              <div class="shop-name" v-else>{{detailAll.supplier_info.name}}
                <van-button plain round class="btn brand" v-if="detailAll.supplier_info.label_name">{{detailAll.supplier_info.label_name}}</van-button>
              </div>

              <div class="shop_action">
                <van-button plain round v-if="detailAll.supplier_info.company_qualification" class="btn check_allgoods j-companyAptitude" @click="showCompanyCode">公司资质</van-button>
                <van-button plain round @click="JumpName('item-list',{supplier:detailAll.supplier_info.id})" v-if="detailAll.supplier_info && !detailAll.supplier_info.company_qualification && sid!='4031895'" class="btn check_allgoods">查看商品</van-button>
                <van-button plain round @click="linkTo(detailAll.supplier_index_link)" v-if="!detailAll.is_close_item_shop" class="btn intoShop">进店逛逛</van-button>
              </div>
            </div>
            <div class="shop-bottom">
              <div class="style1" v-if="detailAll.is_item_nums==1">
                <a class="auto-width-3" href="javascript:;" @click="JumpName('item-list',{supplier:detailAll.supplier_info.id})">
                  <span>
                    <p class="shop_num">{{detailAll.store_item_num}}</p>
                    <i>全部宝贝</i>
                  </span>
                </a>
                <a class="auto-width-3" href="javascript:;" @click="JumpName('item-list',{supplier:detailAll.supplier_info.id,new:1})">
                  <span>
                    <p class="attention_num">{{detailAll.store_new_item_num}}</p>
                    <i>上新宝贝</i>
                  </span>
                </a>
                <a class="auto-width-3" href="javascript:;" @click="linkTo(detailAll.supplier_index_link)">
                  <span>
                    <p class="attention_num">{{detailAll.supplier_sales_num}}</p>
                    <i>销售总量</i>
                  </span>
                </a>
                <a class="shop-describe">
                  <p>
                    <i>宝贝描述</i>
                    <b>{{detailAll.comment_start.describe_star}}</b>
                    <span>{{detailAll.comment_start.describe_comment}}</span>
                  </p>
                  <p>
                    <i>卖家服务</i>
                    <b>{{detailAll.comment_start.logistics_star}}</b>
                    <span>{{detailAll.comment_start.logistics_comment}}</span>
                  </p>
                  <p>
                    <i>物流服务</i>
                    <b>{{detailAll.comment_start.service_star}}</b>
                    <span>{{detailAll.comment_start.service_comment}}</span>
                  </p>
                </a>
              </div>
              <div class="style2" v-else>
                <a class="shop-describe shop-empty">
                  <p>
                    <i>宝贝描述</i>
                    <b>{{detailAll.comment_start.describe_star}}</b>
                    <span>{{detailAll.comment_start.describe_comment}}</span>
                  </p>
                  <p>
                    <i>卖家服务</i>
                    <b>{{detailAll.comment_start.logistics_star}}</b>
                    <span>{{detailAll.comment_start.logistics_comment}}</span>
                  </p>
                  <p>
                    <i>物流服务</i>
                    <b>{{detailAll.comment_start.service_star}}</b>
                    <span>{{detailAll.comment_start.service_comment}}</span>
                  </p>
                </a>
              </div>
            </div>
          </div>
          <div class="shop-con" v-else-if="detailAll.is_store_log==1">
            <div class="shop-top">
              <div class="logo">
                <img :src="detailAll.store_logo" />
              </div>
              <div class="certificate-old-shop">
                <div class="shop-name" :class="{'old-shop-tips' : credit_certificate || (shopLevelInfo.derail == 1 && shopLevelInfo.level != 0)}">{{detailAll.store_title}}</div>
                <template v-if="credit_certificate || (shopLevelInfo.derail == 1 && shopLevelInfo.level != 0)">
                  <div class="bottom-icon-box" :class="{'more-icon-style' : credit_certificate && shopLevelInfo.derail == 1 && shopLevelInfo.level != 0}">
                    <img v-if="credit_certificate" class="credit-certificate" src="https://img.wifenxiao.com/h5-wfx/images/index/new_credit_certificate.png" alt="credit-certificate" />
                    <div class="shop-year-box" v-if="shopLevelInfo.derail == 1 && shopLevelInfo.level != 0">
                      <img src="https://img.wifenxiao.com/h5-wfx/images/index/new_shop_tip1.png" alt="shop-year-icon" v-if="shopLevelInfo.level == 3">
                      <img src="https://img.wifenxiao.com/h5-wfx/images/index/new_shop_tip2.png" alt="shop-year-icon" v-if="shopLevelInfo.level == 5">
                    </div>
                  </div>
                </template>
              </div>

              <div class="shop_action">
                <van-button plain round @click="JumpName('item-list')" class="btn check_allgoods">查看商品</van-button>
                <van-button plain round @click="linkTo(detailAll.index_link)" v-if="!detailAll.is_close_item_shop" class="btn intoShop">进店逛逛</van-button>
              </div>
            </div>
            <div class="shop-bottom">
              <div class="style1" v-if="detailAll.is_item_nums==1">
                <a class="auto-width-2" href="javascript:;" @click="JumpName('item-list')">
                  <span>
                    <p class="shop_num">{{detailAll.store_item_num}}</p>
                    <i>全部宝贝</i>
                  </span>
                </a>
                <a class="auto-width-2" href="javascript:;" @click="JumpName('item-list',{new:1})">
                  <span>
                    <p class="attention_num">{{detailAll.store_new_item_num}}</p>
                    <i>上新宝贝</i>
                  </span>
                </a>
                <a class="shop-describe">
                  <p>
                    <i>宝贝描述</i>
                    <b>{{detailAll.comment_start.describe_star}}</b>
                    <span>{{detailAll.comment_start.describe_comment}}</span>
                  </p>
                  <p>
                    <i>卖家服务</i>
                    <b>{{detailAll.comment_start.logistics_star}}</b>
                    <span>{{detailAll.comment_start.logistics_comment}}</span>
                  </p>
                  <p>
                    <i>物流服务</i>
                    <b>{{detailAll.comment_start.service_star}}</b>
                    <span>{{detailAll.comment_start.service_comment}}</span>
                  </p>
                </a>
              </div>
              <div class="style2" v-else>
                <a class="shop-describe shop-empty">
                  <p>
                    <i>宝贝描述</i>
                    <b>{{detailAll.comment_start.describe_star}}</b>
                    <span>{{detailAll.comment_start.describe_comment}}</span>
                  </p>
                  <p>
                    <i>卖家服务</i>
                    <b>{{detailAll.comment_start.logistics_star}}</b>
                    <span>{{detailAll.comment_start.logistics_comment}}</span>
                  </p>
                  <p>
                    <i>物流服务</i>
                    <b>{{detailAll.comment_start.service_star}}</b>
                    <span>{{detailAll.comment_start.service_comment}}</span>
                  </p>
                </a>
              </div>
            </div>
          </div>
        </div>
         <!-- 定制 推荐商品 轮播图 start-->
          <!-- 小程序端用swiper -->
        <div class="dz-swiper" v-if="dzContentList && dzContentList.length>0">
          <wx-swiper class="my-swipe" :circular="true"  :indicator-dots="true" indicator-color="#ebedf0" indicator-active-color="#AD0D0F">
            <wx-swiper-item v-for="(list,index) in dzContentList" :key="index" class="swipter-item">
              <div class="dz-list">
                <div class="details" v-for="item in list" :key="item.item_id"  @click="linkTo(item.item_link)">
                  <div class="content-details"><img :src="item.item_img"></div>
                  <div class="content-title">{{item.item_title}}</div>
                  <div class="content-price"><span>￥</span>{{item.price}}</div>
                </div>
                <div class="details" v-if="list.length<3"></div>
                <div class="details" v-if="list.length<2"></div>
              </div>
            </wx-swiper-item>
          </wx-swiper>
        </div>
        <!-- 定制 推荐商品 轮播图 end-->

        <!-- 搭配套餐 -->
        <div class="middle-info-item discount_Package" v-if="detailAll.assort_item && detailAll.assort_item.length>0">
          <a href="javascript:;" @click="JumpName('item-collocate-detail',{id:detailAll.item_detail.item_id,aid:detailAll.assort_item[0].assort_id,type:1})">
            <div class="discount_name">{{detailAll.assort_item[0].assort_title}}
            </div>
            <div class="discount_goods">
              <section class="goods_item" v-for="(item,index) in detailAll.assort_item" :key="index">
                <div class="img-box">
                  <img :src="item.pic_url+'160x160'" :alt="item.title" v-if="item.is_compress==1" />
                  <img :src="item.pic_url" :alt="item.title" v-else />
                  <p>{{mSymbol.name}}{{item.price}}</p>
                </div>
                <section class="item_add" v-if="index!=detailAll.assort_item.length-1">+</section>
              </section>
            </div>
          </a>
        </div>

        <!-- 商品参数组件 -->
        <div class="goods-params-wrap">
          <div class="goods-params-con" v-for="(item,index) in tplData" :key="index" v-if="item.type==35">
            <goods-params :tplItemData="item.content"></goods-params>
          </div>
        </div>

        <!-- 详情 -->
        <section id="detailWrap" class="detail_logo block_logo">
          <span class="liner_detail"></span>
          <span class="detail_content">详情</span>
          <span class="liner_detail"></span>
        </section>
        <section class="mdetail_goodsdet content_detail" :class="[detailAll.is_item_detail_blank == 1 ?'content_detail_padding':'']">
          <section class="mdetail_goodsdet_con">
            <diy-tpl :tplData="tplData"></diy-tpl>
          </section>
        </section>
        <!-- 详情end -->
        <!--得炫商品关联定制 start  -->
        <div class="dx-meal-start" v-if="detailAll.is_hzdx_dhs_dz && detailAll.package_item_list && detailAll.package_item_list.length>0" >
          <div class="dz-title-content">关联商品</div>
          <div class="item-small" v-for="item in detailAll.package_item_list" @click="JumpName(item-detail, {'detailId':item.item_id})" :key="item.item_id">
            <img :src="item.file_path" :alt="item.title">
            <div class="dz-title">{{item.title}}</div>
            <div class="dz-total" v-html="scaleGoodsPriceFn(item.price)"></div>
            <div class="dz-old-total"><s>&yen;{{item.original_price}}</s></div>
          </div>
        </div>
        <!-- 得炫商品关联定制 end -->

        <!-- 定制  欧普  展示关联商品 start -->
        <dz-op-associatedGoods :itemId="detailAll.item_detail.item_id" v-if="detailAll.opzm_dz==1"></dz-op-associatedGoods>
        <!-- 定制  定制  欧普  展示关联商品 end -->

        <!-- 推荐商品 -->
        <goods-recommendation :goodsRecommendation="goodsRecommendation" v-if="detailAll.detail_goods_recommendation==1"></goods-recommendation>

      </div>
      <div class="show-course-list" v-if="is_online_course==1">
        <course-list v-show="showCourselist" :itemId="detailAll.item_detail.item_id"></course-list>
      </div>
    </div>

    <!--sku弹层-->
    <sku-dialog :detailAll="detailAll" :visible.sync="skuDialogVisible" @addSolitaireSuccess="addSolitaireSuccess" :activityType="activityType" :itemId="itemId"></sku-dialog>

    <!-- 拼团sku -->
    <sku-dialog-group :visible.sync="skuGroupVisible" :detailAll="detailAll" :itemId="itemId"></sku-dialog-group>

    <!-- 邀请 -->
    <share-image ref="shareImage"></share-image>

    <!--优惠券弹层-->
    <coupon-dialog :visible.sync="couponDialogVisible" :couponData="detailAll.coupon_listscount"></coupon-dialog>

    <!--服务承诺弹层-->
    <service-promise :visible.sync="serviceDialogVisible" :serviceData="detailAll.service_promise"></service-promise>

    <!-- 税费详情弹窗  -->
    <tax-fee :visible.sync="taxDialogVisible" :taxData="detailAll.item_detai && detailAll.item_detail.tax_fee"></tax-fee>

    <!-- 公司资质弹窗 -->
    <goods-code :visible.sync="codeDialogVisible" :codeData="detailAll.supplier_info.company_qualification" v-if="detailAll.supplier_info"></goods-code>

    <!-- ST 自定义分享 -->
    <god-share-cpt ref="god-share-cpt" @share="shareGoods"></god-share-cpt>
    <!-- ED 自定义分享 -->

    <!-- 粉丝才能购买商家二维码弹窗 -->
    <shop-code ref="shopCode"></shop-code>

    <!-- 商品分享二维码弹窗 -->
    <!-- 定制 item_poster 为多个海报图 -->
    <goods-code :visible.sync="goodsCodeDialogVisible" :isCustomPoster="detailAll.is_custom_poster" :isPosterShow="detailAll.is_poster_show" :codeData="detailAll.qrcode" :item_poster="detailAll.item_poster"></goods-code>
   <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
/**
 * @Author: yqe@360shop.cn
 * @Date: 2019-12-04 19:43:18
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-12-17 14:34:11
 */
  import GodShareCpt from '@/components/god/god-share'
  import skuDialog from '../../../components/skuDialog'
  import skuDialogGroup from '../../../components/skuDialogGroup' // 拼团sku弹窗
  import shareImage from '@/components/wxShare/shareImage'
  import couponDialog from '../../../components/couponDialog'
  import servicePromise from '../../../components/servicePromise'
  import taxFee from '../../../components/taxFee'
  import groupMore from '../../../components/groupMore'
  import goodsRecommendation from '../../../components/goodsRecommendation'
  import goodsMaterial from '../../../components/goodsMaterial'
  // 欧普定制关联商品
  import dzOpAssociatedGoods from '../../../components/dzOpAssociatedGoods'
  // 欧普定制3D链接
  import dzOp3DLink from '../../../components/dzOp3DLink'
  // associated - goods
  import goodsActivity from '../../../components/goodsActivity'
  import stepComp from '../../../components/stepComp'
  import diyTpl from '@/components/diyTpl/index'
  import goodsParams from '@/components/diyTpl/decoration/goodsParams'
  import { scaleGoodsPrice, scaleGoodsPriceNoMark } from '@/utils/index'
  import { ajaxPraise, newItemDetailDiyHtml } from '@/api/item/item'
  import { addCollect, cancelCollectionGoods } from '@/api/user/member/memberApi'
  import { getItemQuestion } from '@/api/item/question'
  import goodsCode from '../../../components/goodsCode'
  import ShopCode from '@/components/ShopCode'
  import courseList from './../courseList'
  import Vue from 'vue'
  import Store from '@/utils/store'
  import { mapGetters } from 'vuex'
  import { openPage } from '@/utils/utils'
  import { wxItemQrCode } from '@/api/small/common'
  import small from '@/smallapp/small'
  import SmallLogin from '@/components/SmallLogin/smallLogin'
export default Vue.extend({
  name: "index",
  props: {
    detailAll: {
      type: Object,
    },
    diyData: {
      type: Object,
    },
    off_shelf_status: {
      type: Number,
      default: 0
    }
  },
  components: {
    GodShareCpt,
    skuDialog,
    skuDialogGroup,
    shareImage,
    couponDialog,
    servicePromise,
    taxFee,
    groupMore,
    goodsRecommendation,
    goodsMaterial,
    dzOpAssociatedGoods,
    dzOp3DLink,
    goodsActivity,
    stepComp,
    diyTpl,
    goodsParams,
    goodsCode,
    ShopCode,
    courseList,
    SmallLogin
  },
  data() {
    return {
      isItemActivityDetail: false,
      priceStr: '', // 计算后的价格部分的html
      skuDialogVisible: false,
      skuGroupVisible: false,
      couponDialogVisible: false,
      serviceDialogVisible: false,
      taxDialogVisible: false,
      groupDialogVisible: false,
      skuLabel: "选择",
      skuDetail: "请选择商品规格",
      actEndTime: "",
      actMsg: "",
      timePurchase: "",
      goodsRecommendation: {},
      saleRecordMaxH: '',
      saleRecordStyle: {
        maxHeight: '375px',
      }, // 新购买记录
      saleRecordHide: true,
      isCollected: false,
      nowTime: "",
      tuanId: "",
      codeDialogVisible: false,
      goodsCodeDialogVisible: false, // 商品分享二维码
      sid: "",
      itemId: 0,
      interval: null,
      itemQuestions: [],
      tplData: [],
      p: 1,

      is_online_course: 0, // 是否是在线微课
      course_brought_before: 0, // 是否购买过在线微课,
      provu: 0, // 是否显示试看
      showCourselist: false,
      is_hydz_dz: false, // 上海合亚电子商务有限公司
      khspStatus: false,
      dzContentList: [], // 定制轮播图
      credit_certificate: '', // 诚信认证
      shopLevelInfo: {
        level: 0, // 店铺年限
        derail: 0, // 是否显示多年老店的开关
        title: '' // 店铺名称
      },
      isyatuan: true,
      showSku: false
    };
  },
  created() {
    if (this.$route.query.sid) {
      this.sid = this.$route.query.sid;
    } else {
      this.sid = Store.fetchLocal("sid") ? Store.fetchLocal("sid") : undefined;
    }
    this.onLoad()
    // window.addEventListener('wxhide', () => {
    //   this.p = 2
    // })
    // 上海合亚电子商务有限公司 店铺判断
    const is_hydz_dz = this.$_shop('$_hydz_dz', this.sid)
    const sid = small.globalData.shopId
    const _khsp_dz = this.$_shop('$_khsp_dz', sid)
    this.khspStatus = _khsp_dz
    this.is_hydz_dz = is_hydz_dz
    this.tuanId = this.$route.query.tuanId;
    this.nowTime = new Date().getTime() / 1000;

    this.is_online_course = this.detailAll.is_online_course
    this.provu = this.detailAll.provu
    this.course_brought_before = this.detailAll.course_brought_before
    this.activityFn();
    this.$Bus.$on('commonConfig', (res) => {
      if (res.status == 1) {
        const { data } = res
        const { getBottom } = data
        this.shopLevelInfo.title = data.shop_title
        this.shopLevelInfo.derail = data.is_duration_of_identity
        this.shopLevelInfo.level = data.design_working_life || 0
        this.credit_certificate = getBottom.credit_certificate
      }
    })
  },
  watch: {
    "detailAll.item_detail.item_id"() {
      this.goodsRecommendation.itemId = this.detailAll.item_detail.item_id;
    },
    "detailAll.item_detail.is_time_purchase"() {
      if (this.detailAll.item_detail.is_time_purchase == 1 && this.detailAll.purchase_info) {
        if (this.detailAll.purchase_info.status == 1) {
          this.setIntervalTime(this.detailAll.purchase_info.end_time);
        } else if (this.detailAll.purchase_info.status == 2) {
          this.setIntervalTime(this.detailAll.purchase_info.start_time);
        }
      }
      if (this.tuanId && this.detailAll.tuan_order && this.detailAll.is_success != 1) {
        this.setIntervalTime(this.detailAll.tuan_order.last_end_time)
      }
    },
    detailAll() {
      this.is_online_course = this.detailAll.is_online_course
      this.provu = this.detailAll.provu
      this.course_brought_before = this.detailAll.course_brought_before
      this.activityFn();
      // 定制 轮播图
      if (this.detailAll.recommendItem) {
        var arr = []
        for (let i = 0; i < this.detailAll.recommendItem.length; i += 3) {
          arr.push(this.detailAll.recommendItem.slice(i, i + 3))
        }
        this.dzContentList = arr
      }
      if ((Array.isArray(this.detailAll.item_detail.props) && this.detailAll.item_detail.props.length > 0)) {
        this.showSku = true
      } else if (typeof this.detailAll.item_detail.props === 'object' && Object.keys(this.detailAll.item_detail.props).length > 0) {
        this.showSku = true
      } else {
        this.showSku = false
      }
    },
  },
  mounted() {
    this.getItemQuestionFn();
    if (
      this.detailAll.item_detail &&
      this.detailAll.item_detail.is_time_purchase == 1 &&
      this.detailAll.purchase_info
    ) {
      if (this.detailAll.purchase_info.status == 1) {
        this.setIntervalTime(this.detailAll.purchase_info.end_time);
      } else if (this.detailAll.purchase_info.status == 2) {
        this.setIntervalTime(this.detailAll.purchase_info.start_time);
      }
    }
    if (this.tuanId && this.detailAll.tuan_order && this.detailAll.is_success != 1) {
      this.setIntervalTime(this.detailAll.tuan_order.last_end_time)
    }
    var that = this;
    this.$Bus.$on("skuSelected", function (option) {
      that.skuLabel = option.skuLabel;
      that.skuDetail = option.skuDetail;
    });
    window.addEventListener('wxshow', () => {
      this.goodsCodeDialogVisible = false
    })
  },
  beforeDestroy() {
    // TODO 销毁监听事件
    this.$off();
    this.$Bus.$off("skuSelected");
    this.$Bus.$off("commonConfig");
    clearInterval(this.interval)
    this.interval = null
  },
  methods: {
    // 定制分享海报
    dzShareImg() {
      this.shareGoods()
    },
    // 专栏tab切换
      clickShowCourselist() {
        this.showCourselist = !this.showCourselist
      },
      openClick(url){
        openPage(url)
      },
    // 商品详情加载更多
    onLoad() {
      // 商品详情装修数据新版
      const itemId = this.$route.query.detailId ? this.$route.query.detailId : this.$route.query.item_id
      newItemDetailDiyHtml({ p: this.p, item_id: itemId }).then(res => {
        // console.log('newItemDetailDiyHtml>>>>>>>>>')
        if (res.status == 1) {
          const data = res.data
          this.tplData = this.tplData.concat(data._diyHtml)
          this.p++
          if (data._diyHtml.length == 10) {
            this.onLoad()
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    activityFn() {
      if (
        this.detailAll.is_miao == 1 ||
        this.detailAll.is_bargin == 1 ||
        this.detailAll.is_try == 1 ||
        this.detailAll.is_limit_discount == 1 ||
        this.detailAll.is_cycle == 1 ||
        this.detailAll.isGroup ||
        this.detailAll.ng_activity == 1 ||
        (this.detailAll.bmd_info && this.detailAll.bmd_info.bmd_id > 0)
      ) {
        this.isItemActivityDetail = true;
      } else {
        this.isItemActivityDetail = false;
      }
      if (this.detailAll.is_miao == 1) {
        // 秒杀
        if (this.detailAll.miao.other_status == 1) {
          this.actEndTime = this.detailAll.miao.end;
          this.actMsg = "距结束还剩";
        } else {
          this.actEndTime = this.detailAll.miao.start;
          this.actMsg = "距开始还剩";
        }
      } else if (this.detailAll.is_limit_discount == 1) {
        // 限时打折
        if (this.detailAll.item_discount.other_status == 1) {
          this.actEndTime = this.detailAll.item_discount.end;
          this.actMsg = "距结束还剩";
        } else {
          this.actEndTime = this.detailAll.item_discount.start;
          this.actMsg = "距开始还剩";
        }
      } else if (this.detailAll.is_bargin == 1) {
        // 砍价
        if (this.detailAll.item_bargin.other_status == 1) {
          this.actEndTime = this.detailAll.item_bargin.end;
          this.actMsg = "距结束还剩";
        } else {
          this.actEndTime = this.detailAll.item_bargin.start;
          this.actMsg = "距开始还剩";
        }
      } else if (this.detailAll.isGroup) {
        // 拼团
        if (this.detailAll.info.start_time > this.nowTime) {
          this.actEndTime = this.detailAll.info.startTime;
          this.actMsg = "距开始还剩";
        } else {
          this.actEndTime = this.detailAll.info.endIime;
          this.actMsg = "距结束还剩";
        }
      } else if (this.detailAll.bmd_info && this.detailAll.bmd_info.bmd_id > 0) {
        // 多买优惠
          if (this.detailAll.bmd_info.start_time > this.nowTime) {
            this.actEndTime = this.detailAll.bmd_info.start
            this.actMsg = '距开始还剩'
          } else {
            this.actEndTime = this.detailAll.bmd_info.end
            this.actMsg = '距结束还剩'
          }
        }
      // 推荐商品
      this.goodsRecommendation.itemId = this.detailAll.item_detail
        ? this.detailAll.item_detail.item_id
        : "0";
      this.goodsRecommendation.goods_recommend_names = this.detailAll.goods_recommend_names;
      if (this.detailAll.time) {
        this.isCollected = true;
      } else {
        this.isCollected = false;
      }

      if (
        this.detailAll.item_detail &&
        this.detailAll.item_detail.is_time_purchase == 1 &&
        this.detailAll.purchase_info
      ) {
        if (this.detailAll.purchase_info.status == 1) {
          this.setIntervalTime(this.detailAll.purchase_info.end_time);
        } else if (this.detailAll.purchase_info.status == 2) {
          this.setIntervalTime(this.detailAll.purchase_info.start_time);
        }
      }

      if (this.detailAll.info && this.detailAll.info.endIime) {
        this.setIntervalTime(this.detailAll.info.endIime)
      }
      if (this.tuanId && this.detailAll.tuan_order && this.detailAll.is_success != 1) {
        this.setIntervalTime(this.detailAll.tuan_order.last_end_time)
      }
    },
    // 商品二维码
    showGoodsCode() {
      this.$refs["god-share-cpt"].show(this.detailAll);
    },
    /**
     * 链接跳转
     */
    JumpName(url, data) {
      this.$JumpName(this, url, data);
    },
    linkTo(url) {
      // TODO 小程序跳转处理
      openPage(url)
    },

    /**
     * 商品价格 整数放大
     */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className);
    },
    scaleGoodsPriceNoMarkFn(price, className) {
      return scaleGoodsPriceNoMark(price, className);
    },
    // 点赞
    clickPraise(id) {
      // 已经点赞过
      if (!this.detailAll.praise) {
        return false;
      }
      const params = {
        item_id: id,
      };
      ajaxPraise(params).then((res) => {
        if (res.status == 1) {
          this.detailAll.praise = false;
          this.detailAll.praise_num = parseInt(this.detailAll.praise_num) + 1;
        } else {
          this.$Error(res.msg);
        }
      });
    },
    // 新购买记录
    saleRecordFn(type) {
      this.saleRecordHide = !this.saleRecordHide;
      // TODO 小程序使用原生js
      if (type == 1) {
        document.querySelector('.sale_record_ul').$$getBoundingClientRect().then(res => {
          // console.log(res,'resresres')
          this.saleRecordMaxH = res.height
          this.saleRecordStyle.maxHeight = 'none'
        })
      } else {
          this.saleRecordStyle.maxHeight = this.saleRecordMaxH + 'px'
      }
    },

    // 公司资质
    showCompanyCode() {
      this.codeDialogVisible = true;
    },

    shareGoods() {
      this.$loadingWrap.show()
      wxItemQrCode({item_id: this.detailAll.item_detail.item_id, activity: this.detailAll.activity,activityGroupId: this.$route.query.groupId}).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.detailAll.qrcode = res.data.path
          this.detailAll.item_poster = res.data.item_poster
          this.goodsCodeDialogVisible = true;
        } else {
          this.$Error(res.msg)
        }
      })
    },

    /**
     * 打开SKU弹层
     */
    handleOpenSkuDialog(data) {
       // TODO 小程序判断是否登录
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return false
        }
      const buy_need_fans = this.$store.getters.wxConfig.buy_need_fans;
      const that = this;
      if (that.detailAll.need_subscribe == 1) {
        that.$refs.shopCode.dialogVisible = true;
        return false;
      }
      if (buy_need_fans == 1) {
        that.$isFans(
          () => {
            this.$Error("请先等待商家绑定公众号");
            return false;
          },
          () => {
            that.$refs.shopCode.dialogVisible = true;
            return false;
          },
          () => {
            // 打开sku弹窗
            if (that.$route.query.activity_type == 'solitaire') {
              this.activityType = 'addSolitaireCar'
            } else {
              this.activityType = ''
            }
            that.skuDialogVisible = true;
            that.itemId = Number(data.item_id);
          }
        );
      } else {
        if (that.$route.query.activity_type == 'solitaire') {
          this.activityType = 'addSolitaireCar'
        } else {
          this.activityType = ''
        }
        // 打开sku弹窗
        that.skuDialogVisible = true;
        that.itemId = Number(data.item_id);
      }
    },
    // 群接龙添加成功
    addSolitaireSuccess() {
      this.$parent.$refs.SolitaireBtn.addSuccess()
    },
    /**
     * 打开拼团SKU弹窗
     */
    handleOpenSkuGroup(data) {
      // 打开sku弹窗
      this.skuGroupVisible = true;
      this.itemId = Number(data.item_id);
    },

    // 邀请好友参团
    clickShare() {
      this.$refs.shareImage.showShade = true;
    },
    /**
     * 打开优惠券弹层
     */
    handleOpenCouponDialog() {
      this.couponDialogVisible = true;
    },

    // 打开服务承诺
    handleOpenServiceDialog() {
      this.serviceDialogVisible = true;
    },
    // 打开税费
    handleOpenTaxDialog() {
      this.taxDialogVisible = true;
    },
    // 点击收藏
    clickCollect() {
      const params = {
        id: this.detailAll.item_detail.item_id,
      };
      if (this.isCollected) {
        cancelCollectionGoods(params).then((res) => {
          if (res.status == 1) {
            this.isCollected = !this.isCollected;
          } else {
            this.$Error(res.msg);
          }
        });
      } else {
        addCollect(params).then((res) => {
          if (res.status == 1) {
            this.isCollected = !this.isCollected;
            this.$Error("收藏成功");
          } else {
            this.$Error(res.msg);
          }
        });
      }
    },
    /**
     * 补全小于10的
     */
    timeFormat(param) {
      return param < 10 ? "0" + param : param;
    },

    // 设置定时器做倒计时
    setIntervalTime(time) {
      this.interval = setInterval(() => {
        this.timePurchase = this.getResidueTime(time);
      }, 1000);
    },
    // 获取剩余时间
    getResidueTime(end) {
      const nowtime = new Date().getTime(); // 当前时间 毫秒数
      const endTime = Date.parse(new Date(end.replace(/-/g, "/"))); // 结束时间  毫秒数
      const totalSeconds = (endTime - nowtime) / 1000; // 结束时间-当前时间 = 剩余多少时间
      let day = 0;
      let hour = 0;
      let minute = 0;
      let second = 0;
      if (totalSeconds > 0) {
        day = parseInt(totalSeconds / 3600 / 24); // 天
        hour = parseInt((totalSeconds / 3600) % 24); // 时
        minute = parseInt((totalSeconds / 60) % 60); // 分
        second = parseInt(totalSeconds % 60); // 秒
      } else {
        day = 0; // 天
        hour = 0; // 时
        minute = 0; // 分
        second = 0; // 秒
        clearInterval(this.interval);
      }
      hour = this.addZero(hour);
      minute = this.addZero(minute);
      second = this.addZero(second);
      const residueTime = `<span class="num day">${day}</span><span class="pot day">天</span><span class="num">${hour}</span><span class="pot">时</span><span class="num">${minute}</span><span class="pot">分</span><span class="num">${second}</span><span class="pot">秒</span>`;

      return residueTime;
    },
    // 补齐格式不满10加0
    addZero(n) {
      return n < 10 ? "0" + n : n;
    },
    // 问题列表
    getItemQuestionFn() {
      const param = {
        item_id: this.$route.query.detailId,
      };
      getItemQuestion(param).then((res) => {
        if (res.status == 1) {
          this.itemQuestions = res.data.item_questions;
          this.questionNum = res.data.question_num;
        }
      });
    },
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(["mSymbol"]),

    itemPrice() {
      if (this.detailAll.item_detail) {
        // 订货商原价展示
        if (this.detailAll.dhs_rank && this.detailAll.dhs_original_price_display == 1) {
          if (this.detailAll.range_price && this.detailAll.range_price.start && (this.detailAll.range_price.end && this.detailAll.range_price.end != 0) && this.detailAll.range_price.start != this.detailAll.range_price.end && !this.detailAll.is_miao && !this.detailAll.is_bargin && !this.detailAll.item_detail.is_repurchase) {
            const start_price = this.scaleGoodsPriceNoMarkFn(this.detailAll.range_original_price.start)
            const end_price = this.scaleGoodsPriceNoMarkFn(this.detailAll.range_original_price.end)
            this.priceStr = `<span class="icon-yen">${this.mSymbol.name}</span><span>${start_price}</span>-<span>${end_price}</span>`
          } else if (this.detailAll.range_price && this.detailAll.range_price.start && (this.detailAll.range_price.end && this.detailAll.range_price.end != 0) && this.detailAll.range_price.start == this.detailAll.range_price.end && !this.detailAll.is_miao && !this.detailAll.is_bargin && !this.detailAll.item_detail.is_repurchase) {
            const curPrice = this.scaleGoodsPriceFn(this.detailAll.range_original_price.start)
            this.priceStr = `<span>${curPrice}</span>`
          } else if (this.detailAll.range_price && this.detailAll.range_price.start && !this.detailAll.range_price.end && this.detailAll.range_price.start != this.detailAll.range_price.end && !this.detailAll.is_miao && !this.detailAll.is_bargin && !this.detailAll.item_detail.is_repurchase) {
            const curPrice = this.scaleGoodsPriceFn(this.detailAll.range_original_price.start)
            this.priceStr = `<span>${curPrice}</span>`
          } else {
            const curPrice = this.scaleGoodsPriceFn(this.detailAll.item_original_price)
            this.priceStr = `<span>${curPrice}</span>`
          }
        } else {
          if (this.detailAll.range_price && this.detailAll.range_price.start && (this.detailAll.range_price.end && this.detailAll.range_price.end != 0) && this.detailAll.range_price.start != this.detailAll.range_price.end && !this.detailAll.is_miao && !this.detailAll.is_bargin && !this.detailAll.item_detail.is_repurchase) {
            const start_price = this.scaleGoodsPriceNoMarkFn(this.detailAll.range_price.start)
            const end_price = this.scaleGoodsPriceNoMarkFn(this.detailAll.range_price.end)
            this.priceStr = `<span class="icon-yen">${this.mSymbol.name}</span><span>${start_price}</span>-<span >${end_price}</span>`
          } else if (this.detailAll.range_price && this.detailAll.range_price.start && (this.detailAll.range_price.end && this.detailAll.range_price.end != 0) && this.detailAll.range_price.start == this.detailAll.range_price.end && !this.detailAll.is_miao && !this.detailAll.is_bargin && !this.detailAll.item_detail.is_repurchase) {
            const curPrice = this.scaleGoodsPriceFn(this.detailAll.range_price.start)
            this.priceStr = `<span>${curPrice}</span>`
          } else if (this.detailAll.range_price && this.detailAll.range_price.start && !this.detailAll.range_price.end && this.detailAll.range_price.start != this.detailAll.range_price.end && !this.detailAll.is_miao && !this.detailAll.is_bargin && !this.detailAll.item_detail.is_repurchase) {
            const curPrice = this.scaleGoodsPriceFn(this.detailAll.range_price.start)
            this.priceStr = `<span>${curPrice}</span>`
          } else {
            const curPrice = this.scaleGoodsPriceFn(this.detailAll.item_detail.price)
            this.priceStr = `<span>${curPrice}</span>`
          }
        }
        return this.priceStr
      }
    }
  },
});
</script>
<style lang="scss">
.middle-info {
  .num-font {
    font-size: 36px;
  }
  .dollar-price {
    .price-scale {
      color: #ffa101;
    }
  }
  .time_to_buy_time {
    span {
      font-size: 24px;
      letter-spacing: 2px;
    }
  }
  .group_StepType {
    .step_price {
      .num-font {
        font-size: 32px;
      }
    }
  }
  .coupon_price{
    color: #F30C23;
    font-size: 24px;
    .price-scale{
      .num-font{
        font-size: 32px;
      }
    }
  }
}
</style>
<style lang="scss">
  @import "src/styles/mixin";
  @import "src/styles/variables";
  .middle-info{
    .crossPrice{
      font-size: 24px;
      color: #333;
      span{
        color: #F30C23;
        font-weight: 500;
        font-size: 28px;
      }
    }
    .course-tab{
      padding-bottom:20px;
      background:#fff;
      .course-tab-con{
        display:flex;
        background:#fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      }
      .item{
        position:relative;
        width:50%;
        text-align:center;
        font-size:26px;
        height:92px;
        line-height:90px;
        color:#666;
        &.cur{
          color: #333333;
          font-size: 28px;
          font-weight: bold;
          &::after{
            display: block;
            @include gradient(right,RGBA(242, 18, 40, 1),RGBA(242, 18, 40, .1));
            content: "";
            position: absolute;
            width: 80px;
            height: 5px;
            bottom: 0;
            left: 50%;
            margin-left: -40px;
          }
        }
        .icon{
          position:absolute;
          top:0;
          bottom:0;
          font-size:20px;
          margin:auto 6px;
          padding:0 8px;
          height:30px;
          border:0;
          font-weight:normal;
          background:#F21228;
          color:#fff;
        }
      }
    }
    &-item{
      margin-bottom:20px;
      padding: 28px 30px 18px;
      border-radius:20px;
      background: #fff;
      &.title-price-box{
        border-radius:0 0 20px 20px;
      }
      &.middle,&.sale_record{
        padding:0 0 0 30px;
      }
      //限时购
      .time-purchase{
        margin:10px 0 26px;
        .time_to_buy_wrap{
          display:flex;
          justify-content: space-between;
          align-items:center;
          height:80px;
          padding:0 26px;
          border-radius:80px;
          background:#FFF2F4;
        }
        .time_to_buy_info{
          color:#F21228;
          i{
            display:inline-block;
            width:36px;
            height:36px;
            margin-right:10px;
            vertical-align: -8px;
            background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_time.png") no-repeat;
            background-size:100%;
          }
        }
        .time_to_buy_time{
          font-size:0;
          color:#333;
        }
      }
      .good-price-collect {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        position: relative;
        .good-price-main {
          width: calc(100% - 120px);
        }
      }
      .collect{
          display:flex;
          flex-direction:row;
          flex-wrap: nowrap;
          justify-content:center;
          align-items:center;
          width:120px;
          height:46px;
          background:#F7F7F7;
          border-top-left-radius: 23px;
          border-bottom-left-radius: 23px;
          font-size:24px;
          color:#999;
          position: absolute;
          top: 50%;
          right: -30px;
          transform: translate(0, -50%);
          padding: 10px 17px 10px 15px;
          .icon{
            width:29px;
            height:27px;
            background-repeat: no-repeat;
            background-size:100% 100%;
            margin-right: 6px;
            &.icon-share{
              background-image:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/share_img.png");
            }
            &.icon-collect {
              background-image: url(https://img.wifenxiao.com/h5-wfx/images/item/detail/collect1_1.png);
              &.collected{
                background-image:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/collect2.png");
              }
            }
          }
        }
      .collect1{
        top: 80%;
      }
      .goods-sale{
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        >div{
          margin-right:12px;
          margin-bottom:10px;
          &:last-child{
            margin-right:0;
          }
        }
        .price{
          color:#F30C23;
          &.fontZiy{
            @include alignTop;
            font-size: 20px;
            line-height: 24px;
            padding: 5px 12px;
            background: #ddd;
            margin-right: 10px;
            margin-bottom: 12px;
            border-radius: 24px;
            color:#fff;
            @include gradient(right,#FF2A40,#FE3C70);
          }
        }
        .dollar-price{
          padding:0;
          border:0;
          color:#FFA101;
          .price-scale {
            color:#FFA101;
          }
        }
        .commision{
          color:#94734D;
          margin-bottom: 4px;
        }
      }
      .dhs-price{
        display: inline-block;
        padding: 5px 6px;
        margin: 4px 0 5px;
        font-size: 22px;
        color: #F30C23;
        border: 2px solid #F30C23;
        border-radius: 2px;
        font-weight: bold;
      }
      .point,.virtual_currency{
        padding:4px 8px;
        border-radius:6px;
        color:#F30C23;
        background:#FFF5F6;
      }
      .other-price{
        display:flex;
        flex-wrap:wrap;
        font-size: 24px;
        color: #999;
        >div{
          margin: 10px 12px 20px 0;
          &:last-child{
            margin-right:0;
          }
        }
        .price{
          display: inline-block;
          margin-right: 40px;
        }
      }
      .goods-vip{
        position:relative;
        margin: 7px 0 0;
        width: 100%;
        height: 60px;
        line-height:60px;
        font-size: 26px;
        background: url(https://img.wifenxiao.com/h5-wfx/images/item/detail/vip_price_bg.png) center no-repeat;
        background-size: 100% auto;
        .vip-left{
          padding-left:72px;
          color:#C2985E;
          &:before{
            position:absolute;
            top:12px;
            left:22px;
            content:"";
            width:40px;
            height:36px;
            background: url(https://img.wifenxiao.com/h5-wfx/images/item/detail/vip_price_icon.png) center no-repeat;
            background-size: 100% auto;
          }
          b{
            color:#F30C23;
          }
        }
        .vip-right{
          padding-right:32px;
          color:#693D14;
          .icon-right{
            margin-left:2px;
            padding:5px;
            vertical-align: 4px;
          }
        }
      }
      .import_tax{
        margin:20px 0;
        font-size:24px;
        line-height:32px;
        color:#999;
        .import_tax_tip{
          display:inline-block;
          width:24px;
          height:24px;
          margin-left:8px;
          vertical-align:-4px;
          background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_tax.png") no-repeat;
          background-size:100% 100%;
        }
      }
      .kj_box{
        margin:16px 0;
        font-size:24px;
        line-height:32px;
        color:#999;
        .area_info{
          img{
            float:left;
            width:32px;
            height:32px;
            border-radius:50%;
          }
          .area_name{
            margin-left:10px;
          }
        }
        .kj_bssp,.kj_hwzy,.kj_delivery{
          position:relative;
          padding-left:36px;
          &:before{
            position:absolute;
            top: 4px;
            left: 16px;
            content:"";
            width:2px;
            height:26px;
            background-color:#E5E5E5;
          }
          i{
            float:left;
            width:32px;
            height:32px;
            border-radius:50%;
            margin-right:10px;
          }
        }
        .kj_bssp{
          i{
            background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/kj_bssp.png") no-repeat;
              background-size:100% 100%;
          }
        }
        .kj_hwzy{
          i{
            background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/kj_hwzy.png") no-repeat;
            background-size:100% 100%;
          }
        }
        .kj_delivery{
          i{
            display:none;
          }
        }
      }
      .goods-title{
        display:flex;
        align-items:center;
        padding: 28px 0;
        position: relative;
        width: 100%;
        .title-box{
          @include lineClamp(28px,36px,0);
          width: calc(100% - 120px);
          &.wid100{
            width: 100%;
          }
        }
        .collect{
          top: 42%;
        }
        &-tip{
          display: inline-block;
          font-size: 24px;
          line-height: 24px;
          padding: 4px 14px;
          background: $mainColor;
          color: #fff;
          border-radius: 24px;
          vertical-align: 2px;
          @include btnGroup($fontDefault, $bgDefault);
          &.NeiGou{
            display:none;
          }
          &.fontZiy{
            color:#fff;
            @include gradient(right,#FF2A40,#FE3C70);
          }
          &.Ziy{
            color:#fff;
            @include gradient(right,#FF2A40,#FE3C70);
          }
          &.Try{
            @include btnGroup($fontTry, $bgTry);
          }
          &.BaoY{
            @include btnGroup($fontBaoY, $bgBaoY);
          }
          &.ZhouQG{
            @include btnGroup($fontZhouQG, $bgZhouQG);
          }
          &.FuGYH{
            @include btnGroup($fontFuGYH, $bgFuGYH);
          }
          &.XianSG{
            @include btnGroup($fontXianSG, $bgXianSG);
          }
          &.XianJiZ{
            @include btnGroup($fontXianJiZ, $bgXianJiZ);
          }
        }
        &-txt{
          font-weight: 700;
          line-height:1.5;
          color: #333;
        }
        .useTime{
          font-size: 24px;
          color: #333;
          line-height: 36px;
          margin-top: 14px;
          .red{
            color: #F82F43;
          }
        }
      }
      .goods-title-txt2{
        font-size: 24px;
        color: #999;
        margin-bottom: 28px;
        line-height: 30px;
      }
      //周期购活动补充文案
      .delivery_cycle{
        .cycle_record{
          font-size: 24px;
          color: #999;
          line-height: 30px;
        }
      }
      .ladder_price_wrap{
        margin-bottom:20px;
      }
      .ladder_price_detail{
        margin-top:20px;
        .area_price{
          display:flex;
          justify-content:space-around;
          flex-wrap:wrap;
          padding:14px 0;
          font-size:24px;
          border-radius:10px;
          background:#FFF5F6;
          li{
            padding:10px 20px;
            text-align:center;
            .t1{
              color:#F21228;
              span{
                font-size:36px;
              }
            }
            .t2{
              margin-top:6px;
              color:#666;
            }
          }
        }
      }
      .presell{
        margin-top:24px;
        .earnest_box{
          display:flex;
          font-size:24px;
          color:#F21228;
          p{
            width:50%;
            padding:26px 0;
            text-align:center;
            border:2px solid #F21228;
            border-radius:0 10px 10px 0;
            &.left{
              font-size:0;
              border:2px solid #F21228;
              border-radius: 10px 0 0 10px;
              background:#F21228;
              color:#fff;
              .front_money,.symbol,.number{
                font-size:24px;
              }
            }
          }
        }
        .presale-paytime{
          margin-top:20px;
          font-size:22px;
          text-align:center;
          color:#999;
        }
      }
      .goods-other{
        font-size: 0;
        flex-direction: row;
        >div{
          display:inline-block;
        }
        &-item{
          font-family: PingFang;
          float:left;
          font-size: 24px;
          width:230px;
          color: #999;
          line-height: 36px;
          margin-bottom: 17px;
          .donate{
            border: 1px solid #FFA101;
            color: #FFA101;
            font-size: 20px;
            line-height: 22px;
            border-radius: 4px;
            padding:0 4px;
            margin-left: 6px;
            vertical-align: 2px;
          }
          .donate-by {
            border: 1px solid #F21228;
            color: #F21228;
          }
        }
      }
      .common-wrap{
        display:flex;
        align-items:center;
        &-label{
          font-size: 26px;
          color: #333;
          margin-right: 33px;
          padding: 30px 0;
          font-weight: bold;
          @include alignTop;
          &.font14{
            font-size: 28px;
          }
        }
        &-con{
          overflow:auto;
          display:flex;
          flex-wrap:wrap;
          justify-content: space-between;
          align-items:center;
          flex:1;
          padding:30px 30px 30px 0;
          font-size: 26px;
          color: #666;
          line-height: 28px;
          border-bottom:2px solid #EDEDED;
          //优惠券
          .coupon{
            overflow:auto;
            display:flex;
            &-item{
              min-width:160px;
              height: 40px;
              margin-left:20px;
              padding: 0 20px;
              font-size: 20px;
              line-height: 40px;
              text-align:center;
              color: #F30C23;
              background: url(https://img.wifenxiao.com/h5-wfx/images/item/detail/coupon_bg.png) center no-repeat;
              background-size: 100% 100%;
              &:first-child{
                margin-left:0;
              }
              .coupon_tip{
                line-height: 20px;
                margin-left: 4px;
                padding-left: 10px;
                color:#666;
                border-left: 2px dashed #F21228;
              }
              .coupon_price{
                line-height: 20px;
              }
            }
          }
        }
        &:last-child{
          .common-wrap-con{
            border-bottom:0;
          }
        }
        &-icon{
          color: #666;
          .svg-icon{
            font-size:20px;
          }
          .num {
            margin-left: 8px;
          }
          .icon{
            &.zan{
              display:inline-block;
              width:30px;
              height:34px;
              vertical-align: -6px;
              background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_praise.png") no-repeat;
              background-size:100% 100%;
              &.icon_praised{
                background-image:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_praised.png");
              }
            }
          }
        }
        .group-step{
          margin-top: 20px;
        }
      }

      // 促销
      .promotion{
        .common-wrap-con{
          display:block;
          .common-con-info{
            display:flex;
            align-items:center;
            margin-top:10px;
            &:first-child{
              margin-top:0;
            }
          }
          .name{
            display:inline-block;
            height:34px;
            line-height:34px;
            padding:0 12px;
            border-radius:34px;
            font-size:20px;
            background:#FFF0F1;
            color:#F30C23;
          }
          .detail{
            margin-left:10px;
          }
        }
      }
      //老的购买记录
      &.sale_record{
        padding-left:30px;
        .common-wrap-label{
          width:auto;
        }

      }
      //最近购买记录
      &.sale_record_new{
        padding:0;
        .title{
          padding:35px 30px;
          font-size:28px;
          font-weight:bold;
          color:#333;
          border-bottom:2px solid #EDEDED;
        }
        .sale_record_ul{
          max-height:750px;
          overflow:hidden;
          &.last-has-border{
            .sale_record_li{
              border-bottom:2px solid #EDEDED;
            }
          }
        }
        .sale_record_li{
          height:150px;
          border-bottom:2px solid #EDEDED;
          &:last-child{
            border-bottom:0;
          }
        }
        .sale_record_item{
          display:flex;
          justify-content: space-between;
          align-items:center;
          padding:30px;
          .user_img{
            overflow:hidden;
            width:86px;
            height:86px;
            margin-right:20px;
            border-radius:50%;
            img{
              width:100%;
              height:100%;
            }
          }
          .center_info{
            flex:1;
            font-size:22px;
            color:#999;
            .nickname{
              font-size:26px;
              color:#333;
            }
            .sku_info{
              margin-top:12px;
            }
          }
          .num{
            width:100px;
            font-size:24px;
          }
          .buy_time{
            width:300px;
            text-align:right;
            color:#666;
          }
        }
        .show_more,.hide_more{
          height:90px;
          line-height:90px;
          font-size:24px;
          text-align:center;
          color:#666;
          span{
            margin-right:4px;
          }
          //TODO 小程序不用svg
          .icon-right{
            margin-left:4px;
            font-size:20px;
            transform: rotate(45deg);
            vertical-align: 4px;
          }
        }
        .hide_more{
          //TODO 小程序不用svg
          .icon-right{
            transform: rotate(-135deg);
            vertical-align: 0;
          }
        }
      }
      //最近访客
      &.recent_visitor_box{
        padding:0;
        .title{
          padding:35px 30px;
          font-size:28px;
          font-weight:bold;
          color:#333;
        }
        .recent_visitor{
          padding:0 30px 50px 30px;
          overflow:hidden;
        }
        .recent_visitor_swiper{
          overflow:auto;
          white-space: nowrap;
          .user_img{
            display:inline-block;
            overflow:hidden;
            width:86px;
            height:86px;
            margin-left:-30px;
            padding:2px;
            border-radius:50%;
            background: #fff;
            &:first-child{
              margin-left:0;
            }
            img{
              display:block;
              width:100%;
              height:100%;
              border-radius:50%;
            }
          }
        }
      }

    }
    .select-any{
      display:flex;
      justify-content: space-between;
      align-items:center;
      background: #FFF6F5;
      font-size: 0;
      margin-bottom:20px;
      margin-top:-30px;
      padding: 24px 30px;
      border-radius:0px 0px 20px 20px;
      &-tips{
        display: inline-block;
        font-size: 20px;
        color: #F21228;
        border: 2px solid #F21228;
        padding: 6px 10px;
        border-radius: 5px;
        margin-right: 20px;
      }
      &-txt{
        display: inline-block;
        color: #666666;
        font-size: 26px;
      }
      &-btn{
        font-size: 26px;
        color: #F21228;
        padding: 0 10px;
        .icon-right{
          border-color:#F21228;
        }
      }
    }
    //预售
    .presale-box{
      .presale-time{
        overflow:hidden;
        display:flex;
        align-items:center;
        height:82px;
        border-radius:10px;
        background:#F7F7F7;
        .left{
          position:relative;
          height:82px;
          line-height:82px;
          font-size:28px;
          padding:0 30px;
          background:#F21228;
          color:#fff;
          &::before{
            content:"";
            position:absolute;
            top:28px;
            right:-10px;
            width:0;
            height:0;
            border:12px solid transparent;
            border-left-color:#F21228;
            border-right:0;
          }
        }
        .right{
          padding-left:36px;
          p{
            font-size:22px;
            line-height:1.4;
            color:#666;
          }
        }
      }
    }
    //拼团团长等价格
    .group-price-box{
      .group_goods_info{
        padding:30px;
        color:#666;
        .info_bot{
          span{
            margin-right:40px;
            &:last-child{
              margin-right:0;
            }
          }
          i{
            font-size:26px;
            font-weight:bold;
            color:#F21228;
          }
          b{
            color:#999;
          }
        }
      }
    }
    // 服务承诺
    .service_box{
      margin-bottom:20px;
      background:#fff url(https://img.wifenxiao.com/h5-wfx/images/item/detail/service_promise.png) bottom/cover no-repeat;
      border-radius: 20px;
      .shop-server{
        height: 96px;
        padding: 0 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span{
          font-size: 22px;
          line-height:1.4;
          color: #666666;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          i {
            display:inline-block;
            img {
              display: inline-block;
              width: 24px;
              height: 24px;
              vertical-align: -4px;
            }
          }
        }
        .all-class-icon{
          color: #666666;
          font-size:20px;
          font-weight: bold;
        }
      }
    }
    //评价 TODO #换成.
    .detailComment, .detailAsk{
      padding: 30px;
      background: #fff;
      border-radius: 20px;
      .criticism {
        font-size: 28px;
        position: relative;
        font-weight: bold;
        .all_evaluate_right {
          font-size: 24px;
          line-height: 28px;
          color: #999999;
          float: right;
          .all-class-icon{
            font-weight: bold;
            width: 16px;
          }
        }
      }
      .detail-comment-wrap{
        overflow-x:auto;
        white-space: nowrap;
      }
      .detail-comment{
        display:inline-block;
        vertical-align: top;
        width:626px;
        height: 300px;
        padding: 30px 25px;
        margin:24px 30px 0 0;
        background: #F7F7F7;
        border-radius: 6px;
        &.width100{
          width:690px;
        }
        &:last-child{
          margin-right:0;
        }
        .comment_top {
          margin-bottom: 20px;
          .comment_head_img {
            display: inline-block;
            width: 62px;
            height: 62px;
            border-radius: 50%;
            vertical-align: middle;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .comment_score{
            margin-left:14px;
          }
          b {
            display: inline-block;
            font-weight: normal;
            vertical-align: middle;
            font-size: 28px;
          }
          i {
            img {
              width: 112px;
              height: 16px;
              display: inline-block;
              vertical-align: top;
              margin-top: 9px;
            }
          }
        }

        .comment_content {
          font-size: 26px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: initial;
          line-height: 36px;
          height: 72px;
        }

        .comment_bottom {
          margin: 5px 0 0;
          color: #999;
        }
        .add_comlist{
          margin-top:10px;
          font-size:26px;
          .add_label{
            font-size: 24px;
            color:#F30C23;
            line-height: 40px;
            margin-bottom: 8px;
          }
          .add_comlist_style {
            font-size: 26px;
            color: #333;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
      }
      .detail-ask{
        padding-top: 30px;
        &-item{
          display:flex;
          line-height: 40px;
          margin-bottom: 25px;
          .icon_ask{
            display: inline-block;
            width: 40px;
            height: 40px;
            margin-right:10px;
            background:url(https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_ask.png) bottom no-repeat;
            background-size:100% 100%;
            vertical-align: top;
          }
          .ask-text{
            flex:1;
            color: #333;
            margin-right:10px;
            @include lineClamp(26px,1.4,1);
          }
          .answer-text{
            font-size: 24px;
            color: #999;
          }
        }
        .detail-ask-question{
          text-align: center;
          line-height: 32px;
          color: #999;
          font-size: 26px;
          padding: 19px 0 45px;
          .icon_question{
            display: inline-block;
            width: 32px;
            height: 32px;
            background:url(https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_question.png) bottom no-repeat;
            background-size:100% 100%;
            vertical-align: top;
          }
        }
        .ask-btn{
          text-align: center;
          .btn{
            height: 60px;
            line-height: 60px;
            padding: 0 32px;
            color: #333;
            border:1px solid #ccc;
            border-radius: 80px;
            font-size: 24px;
          }
        }
      }
    }
    //店铺
    .shop-info{
      padding:30px;
      .shop-top{
        display:flex;
        flex-wrap:wrap;
        justify-content: space-between;
        align-items: center;
        .logo{
          width:86px;
          height:86px;
          img{
            display:block;
            width:100%;
            height:100%;
            border-radius:6px;
          }
        }
        .certificate-old-shop{
          flex: 1;
        }
        .bottom-icon-box{
          display: flex;
          align-items: center;
          padding-left: 15px;
          margin-top: 10px;
          & .shop-year-box{
            margin-left: 8px;
          }
        }
        .credit-certificate {
          width: 120px;
          height: 36px;
        }
        .shop-year-box{
          display: flex;
          justify-content: center;
          align-items: center;
          &.only-shop-year{
            margin-bottom: 20px;
          }
          img{
            width: 106px;
            height: 36px;
          }
        }
        .shop-name{
          margin-left:15px;
          flex:1;
          font-size:28px;
          color:#333333;
          font-weight: 500;
          &.old-shop-tips{
            max-width: 306px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .brand{
            font-size:20px;
            height:34px;
            padding:0 10px;
            border:0;
            background:#FFF0F1;
            color:#F30C23;
          }
        }
      }
      .btn{
        height:44px;
        margin-right:10px;
        padding:0 14px;
        font-size:22px;
        color:#F21228;
        border-color:#F21228;
        &:last-child{
          margin-right:0;
        }
        &.intoShop{
          color:#fff;
          background:linear-gradient(-90deg,rgba(233,1,4,1),rgba(254,27,73,1));
        }
      }
      .shop-bottom{
        .auto-width-3{
          width:33.3%;
        }
        .style1{
          display:flex;
          justify-content: space-between;
          align-items:center;
          padding:30px 0 0;
          >a{
            width:33.33%;
            border-left:2px solid #EDEDED;
            font-size:22px;
            text-align:center;
            color:#666;
            &.shop-describe{
              width:40%;
            }
            &:first-child{
              border:0;
            }
          }
          .auto-width-2{
            span{
              display:flex;
              flex-direction: column;
              justify-content: center;
              height:110px;
            }
            p{
              font-size:28px;
              font-weight:bold;
              color:#333;
            }
            i{
              display:block;
              margin-top:8px;
            }
          }
          .shop-describe{
            p{
              padding:2px 0;
              color:#F21228;
            }
            i{
              color:#666;
            }
            span{
              padding:0 6px;
              border-radius:6px;
              font-size:20px;
              line-height:32px;
              background:#FFF0F1;
            }
          }
        }
        .style2{
          padding:30px 0 20px;
          .shop-describe{
            display:flex;
            justify-content: space-around;
            color:#F21228;
            i{
              color:#666;
            }
            span{
              padding:0 6px;
              border-radius:6px;
              font-size:20px;
              line-height:32px;
              background:#FFF0F1;
            }
          }
        }
      }
    }

    //搭配套餐
    .discount_Package{
      .discount_name{
        padding:20px 0 30px;
        font-size:28px;
        color:#333;
      }
      .discount_goods{
        display:flex;
        overflow-x:auto;
        padding-bottom:20px;
      }
      .goods_item{
        display:flex;
        .img-box{
          overflow:hidden;
          position:relative;
          width:136px;
          height:136px;
          border-radius:6px;
          img{
            display:block;
            width:136px;
            height:136px;
          }
          p{
            position:absolute;
            left:0;
            bottom:0;
            width:100%;
            height:37px;
            line-height:37px;
            padding-left:10px;
            color:#fff;
            background:rgba(0,0,0,.4);
          }
        }
        .item_add{
          width:50px;
          height:50px;
          line-height:1;
          margin:42px 30px 0;
          background:#FFEDED;
          border-radius:50%;
          font-size: 44px;
          font-weight: bold;
          text-align: center;
          color: #F21228;
        }
      }
    }

    .content_detail {
      background-color: #fff;
      &.content_detail_padding{
        padding: 0 20px;
      }
    }

    //详情等标题
    .block_logo{
      font-size: 28px;
      text-align: center;
      padding: 30px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      .detail_content{
        padding:0 30px;
      }
      .liner_detail{
        height: 2px;
        width: 165px;
        background: #E6E6E6;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          background:#E6E6E6 ;
          width: 8px;
          height: 8px;
          top: 0;
          transform: rotate(-45deg) translateY(-50%);
        }
        &:first-child{
          &::after{
            right: -3px;
          }
        }
        &:last-child{
          &::after{
            left: 3px;
          }
        }
      }
    }
    .group-info{
      .middle-info-item{
        padding:30px;
      }
      .group_buy_status{
        font-size:28px;
      }
      .group_member{
        margin:30px 0 20px;
        &_title {
          font-size: 28px;
          font-weight: bold;
          color: #333;
          margin-bottom: 50px;
        }
        &.no-margin{
          margin:0;
        }
        &_avatar{
          position:relative;
          float:left;
          padding-bottom:20px;
          margin-left:-20px;
          &:first-child{
            margin-left:0;
            img {
              border: 1px solid #F21228;
              border-radius: 50%;
            }
          }
          img{
            display:block;
            width:80px;
            height:80px;
            border-radius:50%;
          }
          b{
            position:absolute;
            top:52px;
            left:0;
            right:0;
            bottom: -14px;
            margin:auto;
            display:block;
            width:64px;
            height:28px;
            background:url("https://img.wifenxiao.com/h5-wfx/images/groupshop/group_tuan.png") no-repeat;
            background-size:100% 100%;
          }
        }
        &_btn {
          margin-top: 12px;
          padding: 0 50px;
          height: 68px;
          line-height: 68px;
          background: linear-gradient(-90deg, #E90104, #FE1B49);
          box-shadow: 0px 10px 16px 0px rgba(235, 3, 9, 0.2);
          border-radius: 34px;
          color: #fff;
          font-size: 24px;
        }
      }

      .invite-btn{
        display:block;
        width:650px;
        height:96px;
        line-height:96px;
        margin:20px auto;
        font-size:32px;
        color:#fff;
        text-align:center;
        background:linear-gradient(-90deg,rgba(233,1,4,1),rgba(254,27,73,1));
        box-shadow:0px 10px 16px 0px rgba(235,3,9,0.2);
        border-radius:48px;
      }
      .group_goods_rule{
        font-size:28px;
        line-height:1.5;
        >div {
          margin-top:20px;
          font-size:24px;
        }
      }
      //参团信息、人越多越优惠
      .show_pro{
        .show_pro_info{
          display:flex;
          justify-content: space-between;
          align-items:center;
          .title{
            font-size:28px;
          }
          .btn{
            height:44px;
            padding:0 24px;
            font-size:22px;
            border:0;
            background:linear-gradient(-90deg,rgba(233,1,4,1),rgba(254,27,73,1));
            color:#fff;
          }
        }
        .show_pro_con{
          display:flex;
          align-items:center;
          margin-top:20px;
          .group_pic{
            display:flex;
            .pic{
              width:68px;
              height:68px;
              border-radius:50%;
              &:nth-child(2){
                margin-left: -16px;
              }
              img{
                width:100%;
                height:100%;
                border-radius:50%;
              }
            }
          }
          .group_count{
            margin-left:12px;
            flex:1;
            .count{
              font-size:26px;
              i{
                color:#F21228;
              }
            }
            .over_pro{
              display:block;
              margin-top:6px;
              font-size:22px;
              color:#666;
            }
          }
        }
      }

      //阶梯团拼团价
      .group_StepType{
        .step_price{
          margin-bottom:30px;
          border-bottom:2px solid #EDEDED;
          .title{
            font-size:28px;
          }
          .step_price_info{
            display:flex;
            flex-wrap:wrap;
            justify-content: space-between;
          }
          .step_price_item{
            position:relative;
            padding:30px 6px;
            text-align:center;
            min-width:20%;

            @for $i from 1 through 10 {
              &.col#{$i} {
                width:(100/$i)*1%;
              }
            }
            &:before{
              position:absolute;
              left:2px;
              top:30px;
              content:"";
              width:2px;
              height:58px;
              background:#EDEDED;
            }
            &:nth-child(5n+1){
              &:before{
                display:none;
              }
            }
            .price{
              margin-top:12px;
            }
            .mark{
              display:none;
              color:#F21228;
            }
            &.cur{
              .mark{
                display:inline;
              }
            }
          }
        }
      }

      //多商品拼团
      .groups_combination{
        .groups_combination_title{
          display:flex;
          justify-content: space-between;
          align-items:center;
          .title{
            font-size:28px;
          }
          .groups_all{
            color:#999;
            .icon{
              font-size:20px;
              .svg-icon{
                vertical-align: 0px;
              }
            }
          }
        }
        .groups_goods_list{
          display:flex;
          overflow:auto;
          margin:26px 0 0;
          .goods_item{
            float:left;
            margin-right:20px;
            text-align:center;
            &:last-child{
              margin-right:0;
            }
            .goods_img{
              overflow:hidden;
              width:140px;
              height:140px;
              img{
                display:block;
                width:100%;
                height:100%;
              }
            }
            .goods_title{
              margin:16px 0 14px;
              @include lineClamp(20px,20px,1);
            }
            .groups_icon{
              height:32px;
              padding:0 10px;
              font-size:20px;
              color:#FF4343;
              border-color:#F21228;
              border-radius:0;
            }
            .goods_price{
              margin:10px 0;
              font-size:24px;
              color:#FF4343;
            }
          }
        }
      }

      //拼团玩法
      .groups_operate{
        .title{
          font-size:28px;
        }
        ul{
          display:flex;
          justify-content: space-between;
          align-items:center;
          padding:30px 0 10px;
          li{
            position:relative;
            i{
              display:block;
              width:44px;
              height:44px;
              margin:0 auto;
              line-height:44px;
              border-radius:50%;
              background:#F2F2F2;
              font-style:italic;
              font-weight: bold;
              text-align:center;
              color:#999999;
            }
            span{
              display:block;
              margin-top:14px;
              font-size:22px;
              text-align:center;
              color:#999999;
            }
            &:before{
              content:"";
              position:absolute;
              top:22px;
              left:-120px;
              width:132px;
              height:2px;
              background:#F2F2F2;
            }
            &:first-child{
              &:before{
                display:none;
              }
            }
            &.current{
              i{
                color:#F21228;
                background:#FCEDEE;
              }
              span{
                color:#333;
              }
              &:before{
                background:#FFF2F6;
              }
            }
          }
        }
      }
    }

    //定制商品素材
    .mmxx_btn{
      display: flex;
      flex-direction:column;
      justify-content: center;
      align-items: center;
      position: fixed;
      right: 10px;
      top: 380px;
      background: rgba(221,165,17,.9);
      width: 80px;
      height: 80px;
      border-radius: 50%;
      font-size:24px;
      line-height: 30px;
      color:#fff;
      z-index: 11;
    }

    // 定制  华仁医疗设备 start
    .nearby_stores{
        background: #f7f7f7;
        display: none;

      .stores_name{
        width: 100%;
        text-align: center;
        padding:10px 0;
        font-size: 28px;
        border-bottom:2px solid #F0F0F0;
        position:relative;
        background: #fff;
        span{
            padding: 10px 16px;
            display: inline-block;
            position: relative;
            background: #fff;
            z-index: 1;
            color:#333333;
        }
        i{
          position: absolute;
          top:50%;
          left:50%;
          margin-left: -160px;
          z-index: 0;
          width: 320px;
          border-top:2px solid #A9A9A9;
        }
      }
      ul{
        .normal_stores{
          text-align: center;
          padding: 20px;
          p{
            color: #C2C2C2;
            font-size: 28px;
            margin-top: 10px;
          }
        }
        .storeItem{
          position: relative;
          background: #fff;
          width: 100%;
          min-height: 132px;
          margin-bottom: 20px;
          display: none;
          &:first-child{
              display: block;
          }
          .storeItemLink{
            padding: 30px 20px;
            color: #333;
            display: block;
            .store_logo {
              width: 20%;
              vertical-align: top;
              display: table-cell;
              .logo-box {
                width: 100px;
                height: 100px;
                background-size: contain;
                border: 2px solid #EFEFEF;
                border-radius: 6px;
                overflow: hidden;
                display: inline-block;
                img {
                  width: 100%;
                }
              }
            }
            .store_info{
              width: 58%;
              display: table-cell;
              .store_name{
                font-size: 30px;
                color: #333;
                padding-bottom: 8px;
              }
              .store_addr{
                font-size: 24px;
                color: #888;
                width: 100%;
              }
            }
            .store_cell{
              vertical-align: middle;
              text-align: center;
              span{
                border: 2px solid #f44336;
                padding:6px 20px;
                border-radius: 30px;
                color: #f44336;
                font-size: 24px;
                i{
                  font-weight: bold;
                  margin-left: 4px;
                  letter-spacing: -4px;
                }
              }
              .distance{
                color: #e4393c;
                font-size: 24px;
                font-weight: bold;
                position: absolute;
                bottom: 94px;
                width: 150px;
                right: 14px;
                text-align: center;
              }
            }
          }
          .store_btn{
            height: 70px;
            line-height: 70px;
            display: inline-flex;
            display:-webkit-inline-box;
            display:-webkit-inline-flex;
            width: 100%;
            font-size: 28px;
            border-top: 2px solid #f2f2f2;
            .btn-item{
              width: 50%;
              text-align: center;
              border-right: 2px solid #f2f2f2;
              &:nth-child(2){
                border-right: none;
              }
              a{
                display: inline-block;
                &.link1{
                  color: #666;
                }
                &.link2{
                  color: #333;
                }
              }
            }
          }
          .ell{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .tb-cell{
            display: table-cell;
            width: 4000px;
          }
          &.disabled{
            .storeItemLink{
              .store_cell{
                span{
                  border-color:#888;
                  color:#888;
                }
                .distance{
                  color:#888;
                }
              }
            }
          }
        }
      }
      .show_more{
        height: 80px;
        line-height: 80px;
        text-align: center;
        background-color: #fff;
      }
    }
    // 定制  华仁医疗设备 end
    // 定制 上海合亚电子商务有限公司 start
    .hy-whole{
      .level{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size:26px;
        margin:35px 80px 20px 0;
        .level-title{
          background:#782C23 ;
          color: #fff;
          padding: 10px 30px;
          border-radius: 20px;
          font-size:26px;
          width: 380px;
        }
        .level-btn{
          span{
            border:none;
            background: linear-gradient(to right, #FFAE00, #FF8A02);
            color:#fff;
            padding: 10px 30px;
            border-radius: 20px;
            font-size:26px;
          }
        }
      }
    }
    // 定制 上海合亚电子商务有限公司 end
    .add_comlist{
      margin-top:10px;
      font-size:26px;
      .add_label{
        color:#F30C23;
      }
      .add_comlist_style {
        display: inline-block;
        overflow: hidden;
        width: 580px;
        word-break: keep-all;
        white-space: nowrap;
        text-emphasis: none;
      }
    }
  }
  .dz-swiper {
    // margin: 20px;
    margin-bottom: 20px;
    .my-swipe{
      height: 420px;
    }
    .my-swipe .swipter-item {
      background: #fff;
      padding-bottom: 60px;
      margin: 10px;
      .dz-list {
        display: flex;
        .details{
          flex: 1;
          border: 2px solid #fff;
          .content-details {
            width: 232px;
            height: 232px;
            img {
              width: 232px;
              height: 232px;
              border-radius: 10px;
            }
          }
          .content-title {
            font-weight: 700;
            color: #333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;
            overflow: hidden;
            margin: 14px 0;
            line-height: 34px;
            height: 60px;
          }
          .content-price {
            font-size: 24px;
            color: #F30C23;
            font-weight: 400;
            span{
              font-size: 20px
            }
          }
        }
      }
    }
  }
  .fold_main{
    width: 100%;
    margin-bottom: 16px;
  }
  .flod_bg{
    background-image: url("https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/DZ/changjunhai/zhe.png");
    background-size: 100% 100%;
    width: 750px;
    height: 128px;
    p{
      font-size: 52px;
      text-shadow: 0px 4px 8px 0px #ff7053;
      color: #FFCE84;
      line-height: 128px;
      margin-left: 200px;
      font-weight: 500;
    }
  }
  // 得炫关联商品定制 start
  .dx-meal-start {
    overflow: hidden;
    margin: 20px 10px 20px 20px;
    .item-small {
      width: calc((100% - 20px)/2);
      border-radius:12px;
      background: #fff;
      margin-top: 20px;
      margin-right: 10px;
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      padding-bottom: 20px;
      img {
        width: 100%;
        height: 375px;
      }
      .dz-title {
        font-size: 24px;
        margin: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .dz-total {
        margin: 30px 20px 0 20px;
      }
      .dz-old-total {
        font-size: 24px;
        color: #9A9A9A;
        margin: 0 20px;
      }
    }
  }
  .dz-title-content {
    font-size: 32px;
    font-weight: 500;
  }
  // 得炫关联商品定制 end
  .iconhb{
    width: 36px;
    height: 32px;
    margin-right: 3px;
  }
  .collectTop{
    top: 25% !important;
  }
  .back-one {
    color: #FF2A40;
    font-weight: bolder
  }
  .image_dz {
    width: 100%;
    height: 120px;
    object-fit: cover;
  }
  .free_order {
    background: linear-gradient(90deg, #D51441 0%, #FE744F 100%);
    display: flex;
    align-items: center;
    padding: 0 28px;
    height: 110px;
    color: #fff;
    img {
      width: 60px;
      height: 60px;
      margin-right: 10px;
    }
    div {
      @include lineClamp(28px,1.5,1);
    }
  }
</style>
